Question

我正在使用onSelect事件，以便将EndDate的最小值设置为等于设置为StartDate的值。我在几个页面中有相同的代码，但在其中一个页面中它不起作用。如果我在StartDate中选择了一个值，那么当我进入EndDate字段时，datepicker就不会显示。页面使用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
     });
 });

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

使用你评论背后的想法，我设法做了我想做的事情

$("#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");

jQuery Datepicker onSelect不起作用

3 个答案: