JQuery的UI日期选择器结束日期开始日期后第1天

问题描述：

So i am trying to restrict the user from selecting the check-out date to be the same as the check-in date using jQuery UI Date range picker (http://jqueryui.com/datepicker/#date-range). I have it where they are not able to select before the check-in date but as of right now the check-in date and check-out date can be the same files. This is the jqueryJQuery的UI日期选择器结束日期开始日期后第1天

$(function() { 
     $("#check-in").datepicker({ 
     minDate: 0, 
     dateFormat: "yy-mm-dd", 
     changeMonth: true, 
     numberOfMonths: 2, 
     changeYear: true, 
     onClose: function(selectedDate, inst) { 
      $("#check-out").datepicker("option", "minDate", selectedDate); 
     } 
    }); 

    $("#check-out").datepicker({ 
     minDate: "+1D", 
     dateFormat: "yy-mm-dd", 
     changeMonth: true, 
     numberOfMonths: 2, 
     changeYear: true, 
     onClose: function(selectedDate, inst) { 
      $("#check-in").datepicker("option", "maxDate", selectedDate +"+1D"); 
     } 
    }); 

    });

这是HTML

<div class="formInput"> 
    <label for="check-in">Check-in:</label> 
    <input type="text" id="check-in" name="check-in" value="yyyy/mm/dd" size="30" class="textInput"> 
</div> 

    <div class="formInput"> 
     <label for="check-out">Check-out:</label> 
     <input type="text" id="check-out" name="check-out" value="yyyy/mm/dd" size="30" class="textInput"> 
    </div>

我想是的退房日期默认为1天时间每次检查后时间选择入住日期。谢谢你在前进

带调试代码的小提琴会有帮助。 – DrCord 2013-03-19 23:32:23

答

使用此代码 $（ “＃签入”）.datepicker（ “选项”， “的maxDate”，selectedDate + “+ 1D”）

试试看你能不能添加天这个代替：

onClose: function(selectedDate, inst) { 
      var maxDate = new Date(Date.parse(selectedDate)); 
      maxDate.setDate(maxDate.getDate() - 1);    
      $("#check-in").datepicker("option", "maxDate", maxDate); 
     }

这里的小提琴：http://jsfiddle.net/RxTax/1/

我不得不编辑你的小提琴，使它按照我想要的方式行事，但你在那里的某个地方是正确的。这就是我把它改为：http://jsfiddle.net/RxTax/2/ – user1588572 2013-03-20 14:39:13

答

JQuery的UI日期选择器结束日期开始日期后第1天

http://jsfiddle.net/mkginfo/gq37Y/1/

使用此代码不能添加天

$("#check-in").datepicker("option", "maxDate", selectedDate +"+1D")

试试这个：

$(function() { 
     $("#check-in").datepicker({ 
     minDate: 0, 
     dateFormat: "yy-mm-dd", 
     changeMonth: true, 
     numberOfMonths: 2, 
     changeYear: true, 
     onClose: function(selectedDate, inst) { 
      var minDate = new Date(Date.parse(selectedDate)); 
      minDate.setDate(maxDate.getDate() + 1); 
      $("#check-out").datepicker("option", "minDate", minDate); 
     } 
    }); 

    $("#check-out").datepicker({ 
     minDate: "+1D", 
     dateFormat: "yy-mm-dd", 
     changeMonth: true, 
     numberOfMonths: 2, 
     changeYear: true, 
     onClose: function(selectedDate, inst) { 
      var maxDate = new Date(Date.parse(selectedDate)); 
      maxDate.setDate(maxDate.getDate() - 1);    
      $("#check-in").datepicker("option", "maxDate", maxDate); 
     } 
    }); 
    });

它给错误**的ReferenceError：未定义的maxDate ** [打破这个错误] \t minDate.setDate （maxDate.getDate（）+ 1）; – 2016-03-15 09:59:05

答

变化minDate.setDate（maxDate.getDate（）+ 1）; minDate.setDate（minDate.getDate（）+ 1）;

事实是，只是与dateFormat：“yy-mm-dd”一起工作，而不是其他dateFormat作为区域fr或类似的。

我已经写了其他使用替代字段的dateFormats的解决方法。我在IE浏览器和Firefox上测试过，效果很好。

function resetFrom() { 
     var altcheck-in = document.getElementById("altcheck-in"); 
     var check-in= document.getElementById("check-in"); 
     altcheck-in.value = ""; 
     if (altcheck-in.value == "") { 
      check-in.value = ""; 
      $("#check-out").datepicker("destroy"); 
      $("#check-out").datepicker({ 
       minDate: "+1D", 
       dateFormat: "yy-mm-dd", 
       altFormat: "dd-mm-yy", 
       altField: "#altcheck-out", 
       changeMonth: true, 
       numberOfMonths: 1, 
       changeYear: true, 
       showOn: "button", 
       buttonImage: "/images/calendar.gif", 
       buttonImageOnly: true, 
       buttonText: "Select date", 
       onClose: function (selectedDate) { 
        if (selectedDate != "") { 
         var maxDate = new Date(Date.parse(selectedDate)); 
         maxDate.setDate(maxDate.getDate() - 1); 
         $("#check-in").datepicker("option", "maxDate", maxDate); 
        } 
       } 
      }); 
     } 
    } 

    function resetTo() { 
     var altcheck-out = document.getElementById("altcheck-out"); 
     var check-out = document.getElementById("check-out"); 
     altTo.value = ""; 
     if (altcheck-out.value == "") { 
      to.value = ""; 
      $("#check-in").datepicker("destroy"); 
      $("#check-in").datepicker({ 
       dateFormat: "yy-mm-dd", 
       altFormat: "dd-mm-yy", 
       altField: "#altcheck-in", 
       minDate: 0, 
       changeMonth: true, 
       numberOfMonths: 1, 
       changeYear: true, 
       showOn: "button", 
       buttonImage: "/images/calendar.gif", 
       buttonImageOnly: true, 
       buttonText: "Select date", 
       onClose: function (selectedDate) { 
        if (selectedDate != "") { 
         var minDate = new Date(Date.parse(selectedDate)); 
         minDate.setDate(minDate.getDate() + 1); 
         $("#check-out").datepicker("option", "minDate", minDate); 
        } 
       } 
      }); 
     } 
    } 

    $(function() { 
     $("#check-in").datepicker({ 
      dateFormat: "yy-mm-dd", 
      altFormat: "dd-mm-yy", 
      altField: "#altcheck-in", 
      minDate: 0, 
      changeMonth: true, 
      numberOfMonths: 1, 
      changeYear: true, 
      showOn: "button", 
      buttonImage: "/images/calendar.gif", 
      buttonImageOnly: true, 
      buttonText: "Select date", 
      onClose: function (selectedDate) { 
       if (selectedDate != "") { 
        var minDate = new Date(Date.parse(selectedDate)); 
        minDate.setDate(minDate.getDate() + 1); 
        $("#check-out").datepicker("option", "minDate", minDate); 
       } 
      } 
     }); 

     $("#check-out").datepicker({ 
      minDate: "+1D", 
      dateFormat: "yy-mm-dd", 
      altFormat: "dd-mm-yy", 
      altField: "#altcheck-out", 
      changeMonth: true, 
      numberOfMonths: 1, 
      changeYear: true, 
      showOn: "button", 
      buttonImage: "/images/calendar.gif", 
      buttonImageOnly: true, 
      buttonText: "Select date", 
      onClose: function (selectedDate) { 
       if (selectedDate != "") { 
        var maxDate = new Date(Date.parse(selectedDate)); 
        maxDate.setDate(maxDate.getDate() - 1); 
        $("#check-in").datepicker("option", "maxDate", maxDate); 
       } 
      } 
     }); 
    }); 




<input name="altcheck-in" type="text" id="altcheck-in" onchange="resetFrom();" style="width:250px;" /> 
<input name="check-in" type="text" id="check-in" style="display: none" /> 

<input name="altcheck-out" type="text" id="altcheck-out" onchange="resetTo();" style="width:250px;" /> 
<input name="check-out" type="text" id="check-out" style="display: none" />

JQuery的UI日期选择器结束日期开始日期后第1天

相关推荐