Jquery 日期选择器的设置日期
我有一个日期选择器,可以选择一整周。我有两个按钮,可以将所选日期前后移动一周。“前进”按钮始终有效,但“后退”按钮仅在月份发生变化时有效。如果这个月没有变化,什么也不会发生。代码如下Jquery 日期选择器的设置日期,jquery,jquery-ui,jquery-ui-datepicker,Jquery,Jquery Ui,Jquery Ui Datepicker,我有一个日期选择器,可以选择一整周。我有两个按钮,可以将所选日期前后移动一周。“前进”按钮始终有效,但“后退”按钮仅在月份发生变化时有效。如果这个月没有变化,什么也不会发生。代码如下 $(document).ready(function() { $(function() { var startDate; var endDate; var selectCurrentWeek = function() { window
$(document).ready(function() {
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function() {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')}, 1);
}
$('.week-picker').datepicker({
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('.startDate').val($.datepicker.formatDate(dateFormat, startDate, inst.settings));
$('.endDate').val($.datepicker.formatDate(dateFormat, endDate, inst.settings));
$('.week-picker').val(" " + $.datepicker.formatDate(dateFormat, startDate, inst.settings) + " - " + $.datepicker.formatDate(dateFormat, endDate, inst.settings));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if (date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker').datepicker("setDate", new Date());
$('.ui-datepicker-current-day').click();
$('.week-picker .ui-datepicker-calendar tr').on('mousemove', null, function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').on('mouseleave', null, function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
$('#preWeek').click(function () {
var startDate = $('.startDate').val();
var newDate = new Date(startDate);
newDate.setDate(newDate.getDate() - 7);
$('.week-picker').datepicker("setDate", new Date(newDate));
$('.ui-datepicker-current-day').click();
return false;
});
$('#nextWeek').click(function () {
var endDate = $('.endDate').val();
var newDate = new Date(endDate);
newDate.setDate(newDate.getDate() + 1);
$('.week-picker').datepicker("setDate", new Date(newDate));
$('.ui-datepicker-current-day').click();
return false;
});
});
$(文档).ready(函数(){
$(函数(){
var startDate;
var结束日期;
var selectCurrentWeek=函数(){
setTimeout(函数(){
$('.week picker').find('.ui datepicker current day a').addClass('ui-state-active')),1;
}
$(“.week picker”).datepicker({
showOtherMonths:是的,
选择OtherMonths:true,
onSelect:函数(日期文本,inst){
var date=$(this.datepicker('getDate');
startDate=新日期(Date.getFullYear(),Date.getMonth(),Date.getDate()-Date.getDay());
endDate=新日期(Date.getFullYear(),Date.getMonth(),Date.getDate()-Date.getDay()+6);
var dateFormat=inst.settings.dateFormat | |$.datepicker._defaults.dateFormat;
$('.startDate').val($.datepicker.formatDate(dateFormat,startDate,inst.settings));
$('.endDate').val($.datepicker.formatDate(dateFormat,endDate,inst.settings));
$('.week picker').val(“+$.datepicker.formatDate(dateFormat,startDate,inst.settings)+”-“+$.datepicker.formatDate(dateFormat,endDate,inst.settings));
选择CurrentWeek();
},
beforeShowDay:功能(日期){
var cssClass='';
如果在下一个和上一个按钮的处理程序中添加$('.ui datepicker current day:first')
而不是$('.ui datepicker current day')
,则(日期>=startDate&&date将修复您的问题。这是因为您在一周的7天中单击了
$('#preWeek').click(function () {
var startDate = $('.startDate').val();
var newDate = new Date(startDate);
newDate.setDate(newDate.getDate() - 7);
$('.week-picker').datepicker("setDate", new Date(newDate));
$('.ui-datepicker-current-day:first').click();
return false;
});
$('#nextWeek').click(function () {
var endDate = $('.endDate').val();
var newDate = new Date(endDate);
newDate.setDate(newDate.getDate() + 1);
$('.week-picker').datepicker("setDate", new Date(newDate));
$('.ui-datepicker-current-day:first').click();
return false;
});
如果你可以在fiddle中添加此代码,回答起来会很容易。你可以在fiddle中实现此代码吗?这是fiddle:这很有趣。更改后,“上一步”按钮有效,但“下一步”按钮无效。如果我只更改“上一步”按钮并保持“下一步”按钮不变,它们都有效。谢谢。我会标记这就是答案。这是工作提琴:$('.ui datepicker当前日期:最后一天')。单击()
将其放入“下一步”按钮。这样可以解决问题。如果没有它,则每次单击“选择”
上的需要执行8次。即使没有功能问题,您不认为这有点“不干净”吗?我更新了fiddle。谢谢RRK。这很有意义。我感谢您的帮助。