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。这很有意义。我感谢您的帮助。