为Jquery Date Picker执行.Lind事件onLoad

时间:2010-11-20 06:54:30

标签: javascript jquery datepicker

我正在使用kelvin lucks jquery date picker

我设置了开始日期和结束日期选择器,以便在选择开始日期时将相同的日期分配给结束日期,结束日期确保其日历不允许选择开始日期之前的任何日期。

效果很好,除非您选择结束日期而不触及开始日期,您可以在开始日期之前设置结束日期。不好!<​​/ p>

$(function()
{
    $('.date-pick').datePicker({startDate:'2000-01-01', clickInput:true})

        $('#start-date').bind('dpClosed', function(e, selectedDates) {
                var d = selectedDates[0];
                if (d) {
            d = new Date(d);
            $('#end-date').dpSetStartDate(d.addDays(0).asString()).dpSetSelected(d.asString()).val($(this).val());
        }
    });
});

因为我使用PHP预填充输入字段,所以我想要做的就是触发$('#end-date').dpSetStartDate,以便在文档加载时更新结束日期。目前它仅在$('#start-date').bind('dpClosed', function(e, selectedDates) {

上更新

我该怎么做?

谢谢,

2 个答案:

答案 0 :(得分:1)

不幸的是,您不能只是触发事件,因为您正在尝试从selectedDates参数...但是还有另一种获取数据的方法:$('#start-date').dpGetSelected()。通过使用此功能,您可以随时.trigger()事件(立即)更新#end-date范围,如下所示:

$(function() {
    $('.date-pick').datePicker({startDate:'2000-01-01', clickInput:true});
    $('#start-date').bind('dpClosed', function(e, selectedDates) {
      var d = $('#start-date').dpGetSelected()[0];
      if (d) {
       d = new Date(d);
       $('#end-date').dpSetStartDate(d.addDays(0).asString()).dpSetSelected(d.asString()).val($(this).val());
     }
   }).trigger('dpClosed'); //call that event handler we just bound
});

You can test it out here

答案 1 :(得分:0)

如果我理解正确,您正在尝试确保用户在结束日期字段中输入的日期是在他们在开始日期字段中输入的日期之后或之后。

要做到这一点,你需要绑定到两个日期选择器的dpClosed事件,并运行类似这样的逻辑(伪代码):

var start = getSelectedStartDate();
var end = getSelectedEndDate(); //you'll need to write these functions, but you get the idea
if (end < start) {
  // set the end date field to the selected start date
  $("#end-date").dpSetSelected(start); //not sure if this is the only thing you have to do, but again, you get the idea
}

因此,这里的想法是,如果结束日期在用户在任一字段中选择日期的开始日期之前,则开始日期将放在结束日期字段中。