jquery 日期选择器答案

【问题标题】：jquery datepickerjquery 日期选择器
【发布时间】：2011-11-06 22:18:06
【问题描述】：

我在这里和在线查看了一些问题，但我似乎无法找到我正在寻找的答案，或者我只是无法正确实施。我有 2 个日期选择器……一个入住日期和一个退房日期。退房日期必须始终在入住日期的 30 天内。我已经设法使用下面的代码来获得这个结果，但是它在 onSelect 上，因此它在页面加载时才起作用，只有当你选择签入日期时。默认情况下，签入日期是今天，因此在页面加载后最多 30 天内可以选择签出。任何帮助将不胜感激。

    var today = new Date();
today.setHours(0,0,0,0);
$(function(){$( "#datepicker, #departure" ).datepicker({
    defaultDate: +1,
    minDate: 0,
    maxDate: '+12m',
    dateFormat: 'dd/mm/yy',
    numberOfMonths: 3,
    showOn: 'both',
    buttonImageOnly: true,
    buttonImage: 'http://images.aboutrooms.com/hotels/graphics/calendar.gif',
    //beforeShowDay: function(date){return [date.getTime() != today.getTime(), ''];}
    onSelect: function( selectedDate ) {
        if(this.id == 'datepicker'){
          var dateMin = $('#datepicker').datepicker("getDate");
          var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 1); // Min Date = Selected + 1d
          var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 31); // Max Date = Selected + 31d
          $('#departure').datepicker("option","minDate",rMin);
          $('#departure').datepicker("option","maxDate",rMax);                    
        }

    }
        });
});

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

这样做：

将 onSelect 函数移至外部函数
在$(document).ready();时拨打电话
在datepicker配置对象中从onSelect指向它

fn:

function datepickerhandle( selectedDate ) {
        if(this.id == 'datepicker'){
          var dateMin = $('#datepicker').datepicker("getDate");
          var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 1); // Min Date = Selected + 1d
          var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 31); // Max Date = Selected + 31d
          $('#departure').datepicker("option","minDate",rMin);
          $('#departure').datepicker("option","maxDate",rMax);                    
        }

    }

开启选择：

onSelect: datepickerhandle,

加载：

$(document).ready(function(){ datepickerhandle([selected time]); });

要获得选定的时间，请参阅这个 SO 问题：jQuery DatePicker: Get Selected Date

变体编号。 2

jQuery datepicker set selected date, on the fly

当文档加载时，动态设置 datepicker 实例的日期以触发 onSelected 事件

【讨论】：

感谢您的回复。只是通话有问题。我猜它与选定的时间有关，但我不明白。如果我只是做 datepickerhandle();它就像我最初拥有的那样工作。任何机会你都可以在选定的时间帮助我。
使用替代字段，可以隐藏jqueryui.com/demos/datepicker/#alt-field

【解决方案2】：

只需像这样使用结束日期选择器初始化来更新字段

$('.date-pick').datePicker().val(new Date()).trigger('change')

【讨论】：