jQuery Datepicker onSelect 不起作用

Question

我使用onSelect 事件来设置EndDate 的最小值等于设置为StartDate 的值。我在几页中有相同的代码，但在其中一页中它不起作用。如果我在StartDate 中选择一个值，当我进入EndDate 字段时，不会显示日期选择器。页面使用 ajax 加载和处理。

我的代码如下：

$(document).ready(function() {

$("#strStartDate").datepicker({ 
          dateFormat: 'dd/mm/yy', 
          constrainInput: true,
          firstDay: 1,
          hideIfNoPrevNext: true,
          onSelect: function(){
                $("#strEndDate").datepicker( "option", "minDate", $("#strStartDate").val());
          }
     });

     $("#strEndDate").datepicker({ 
          dateFormat: 'dd/mm/yy', 
          constrainInput: true,
          firstDay: 1,
          hideIfNoPrevNext: true
     });
 });

非常感谢任何帮助。提前谢谢你。

利用你的 cmets 背后的想法，我几乎可以做我想做的事情

$("#strStartDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      constrainInput: true,
      firstDay: 1,
      hideIfNoPrevNext: true,
 });

 $("#strEndDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      constrainInput: true,
      firstDay: 1,
      hideIfNoPrevNext: true,
      beforeShow: function (input, inst) {
            inst.settings.minDate = $("#strStartDate").val();
     }
 });

上面的代码限制用户将结束日期设置为小于开始日期，但是如果结束日期中已经有一个值，并且您将开始日期更改为大于结束日期的值，则应该将结束日期设置为相等到开始日期。这就是我在早期代码中尝试使用以下代码所做的事情

onSelect: function(){
        $("#strEndDate").datepicker( "option", "minDate", $("#strStartDate").val());
     }

知道如何使用实例执行此操作而不再次初始化吗？

Answer 1

好吧，伙计们......好消息......至少对我来说：）

$("#strStartDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      constrainInput: true,
      firstDay: 1,
      hideIfNoPrevNext: true,
      onSelect: function(){
            if ($("#strStartDate").val() > $("#strEndDate").val()){
                $("#strEndDate").val($("#strStartDate").val());
            }
      }
 });

$("#strEndDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      constrainInput: true,
      firstDay: 1,
      hideIfNoPrevNext: true,
      beforeShow: function (input, inst) {
            inst.settings.minDate = $("#strStartDate").val();
     }
 });

这是最终代码。它只为每个日期选择器创建一个实例，并在您想将其用作日期范围选择器时执行必要的验证。

再次感谢您的指导

Answer 2

我不确定这是否能解决您的问题，但试试这个：

$("#strStartDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      constrainInput: true,
      firstDay: 1,
      hideIfNoPrevNext: true,
      onSelect: function(selectedDate){
            $("#strEndDate").datepicker("option", "minDate",selectedDate);
      }
 });

Answer 3

这应该可以满足您的需要：

function fromTo(startDate, endDate) {
  $(startDate + ", " + endDate).datepicker({
    onClose: function (dateText, inst) {
      if ("#" + inst.id === startDate) {
        $(endDate).datepicker("option", "minDate", $(startDate).val());
      }
    },
    beforeShow: function (input, inst) {
      if (inst.id == $(endDate).get(0).id) {
        inst.settings.minDate = $(startDate).val();
      }
    },
    dateFormat: 'mm/dd/yy',
    constrainInput: true,
    firstDay: 1,
    hideIfNoPrevNext: true
  });
}

使用fromTo("#startdate", "#enddate");