2015-06-09 209 views
4

http://jsfiddle.net/t3n9p7kp/1/datepicker的设置日期

我有一个日期选择器设置为选择一个整周。我有两个按钮,应该将选定的日期向前和向后移动一周。前进按钮始终工作,但后退按钮仅在月份发生变化时才起作用。如果月份没有改变,则什么都不会发生。代码如下。

$(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; 
    }); 
}); 

我不明白为什么日期不会倒退,除非月份发生变化。

+3

如果你可以添加在拨弄这个代码,它会很容易回答.. –

+0

能否请您在拨弄实现这个? –

+0

这里是小提琴:[链接](http://jsfiddle.net/t3n9p7kp/1/) – Mayiko

回答

0

添加$('.ui-datepicker-current-day:first')而不是$('.ui-datepicker-current-day')在处理程序下一个上一页按钮将解决您的问题。这是因为你在一周的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; 
}); 
+0

http://jsfiddle.net/rejithrkrishnan/t3n9p7kp/4/ 更新到你的小提琴。 – RRK

+1

这很有趣。随着你的改变,上一个按钮可以工作,但下一个按钮不会。如果我只是对上一个按钮进行更改并保留下一个按钮,它们都可以工作。谢谢。我会将其标记为答案。这里是工作小提琴:http://jsfiddle.net/t3n9p7kp/6/ – Mayiko

+0

'$('。ui-datepicker-current-day:last')。click();'把它放在下一个按钮中。这将解决它。每隔**下一个**点击'onselect'需要执行8次。尽管没有功能性问题,但它有点“不洁”,你不觉得吗?我更新了小提琴。 http://jsfiddle.net/rejithrkrishnan/t3n9p7kp/11/ – RRK

相关问题