Jquery UI Datepicker onSelect 和 onInput 事件答案

【问题标题】：Jquery UI Datepicker onSelect and onInput eventsJquery UI Datepicker onSelect 和 onInput 事件
【发布时间】：2015-07-15 12:05:49
【问题描述】：

我的表单中有 2 个日期选择器，一个用于“接送”日期，一个用于“下车”日期。

代码如下：

$(document).ready(function() {
    $('#datepicker_dropoff').datepicker({
        dateFormat: "dd-mm-yy" 
    });

    $("#datepicker_pickup").datepicker({
        dateFormat: "dd-mm-yy", 
        minDate:  0,
        onSelect: function(date){            
            var date1 =   $('#datepicker_pickup').datepicker('getDate');           
            var date = new Date( Date.parse( date1 ) ); 
            date.setDate( date.getDate() + 0 );        
            var newDate = date.toDateString(); 
            newDate = new Date( Date.parse( newDate ) );                      
            $('#datepicker_dropoff').datepicker("option","minDate",newDate);            
        }
    });
});

如您所见，下车日期不能早于取车日期，这当然是故意的。

我的问题是，在这种格式下，日期选择器不会保留该值，如果我单击表单的提交按钮，它会一直告诉我需要填写日期选择器字段，即使每个字段中都有一个值.如果我手动删除该字段中的某些内容然后再次添加它，它就会起作用并且不会出现任何字段提示。我认为这与添加事件有关（默认情况下缺少日期选择器？）

有人可以帮我把它附加到代码中吗？

非常感谢。

【问题讨论】：

看看 DateRangePIcker - daterangepicker.com
提交时如何进行验证？您也可以发布该代码吗？
看，问题是我使用另一个名为 CIVEM (github.com/javanto/civem.js/downloads) 的脚本来翻译字段弹出窗口。这与日期选择器有点冲突。在我修改日期选择器以使下车日期不能早于取车日期之前，开发人员通过添加 onSelect 和 onInput 事件帮助我，但在这种情况下它不再起作用了。
上面的代码可以正常工作。能否请您提供出现错误的代码。
@Luc 为什么onSelect 内部有这么多转化？似乎它们毫无用处。您可以简单地从 var date = $('#datepicker_pickup').datepicker('getDate'); 开始，删除 date 参数并设置 minDate 选项结束。

标签： jquery jquery-ui datepicker

【解决方案1】：

很老套的问题，但我的回答是：

所以我更喜欢在.change(function() { }) 中更改我的最小/最大日期。这样，只有在实际更改日期时才会更改最小/最大日期。

假设是 HTML：

<input type='text' id='datepicker_pickup'>
    to
<input type='text' id='datepicker_dropoff'>

而 jquery 和 jqueryui 1.10.2 使用这个 javascript：

$(function() {
    $('#datepicker_dropoff').datepicker({
        dateFormat: "dd-mm-yy"
    }).change(function() {
        var date1 =   $('#datepicker_pickup').datepicker('getDate');
        $('#datepicker_pickup').datepicker('option','maxDate',date1);
    });

    $("#datepicker_pickup").datepicker({
        dateFormat: "dd-mm-yy"
        ,minDate: 0
    }).change(function() {
        var date1 =   $('#datepicker_pickup').datepicker('getDate');
        $('#datepicker_dropoff').datepicker('option','minDate',date1);
    });
});

here's a fiddle

【讨论】：