jQuery Datepicker onSelect 不起作用

Posted 2023-05-07

【中文标题】jQuery Datepicker onSelect 不起作用

【英文标题】：jQuery Datepicker onSelect is not working

【发布时间】：2011-05-14 00:52:49

【问题描述】：

我使用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());
     

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

【参考方案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();
     
 );

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

再次感谢您的指导

【参考方案2】：

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

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

【参考方案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");

【讨论】：

我真的不知道如何使用这个功能。什么时候调用这个函数？