为 Jquery 日期选择器执行 .bind 事件 onLoad

Question

我正在使用kelvin lucks jquery date picker。

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

效果很好，除非您选择结束日期而不触及开始日期，您可以在开始日期之前设置结束日期。不好！

$(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) {

我该怎么做？

谢谢，

提姆

Answer 1

不幸的是，您不能仅仅触发事件，因为您正在尝试从参数中获取selectedDates...但是还有另一种获取该数​​据的方法：$('#start-date').dpGetSelected()。通过使用它，您可以在任何时候（立即）更新#end-date 范围时.trigger() 事件，如下所示：

$(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.

Answer 2

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

为此，您需要为两个日期选择器绑定到 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
}

所以这里的想法是，当用户在任一字段中选择日期时，如果结束日期早于开始日期，则开始日期将放置在结束日期字段中。