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天時間每次檢查後時間選擇入住日期。謝謝你在前進

來源

2013-03-19 user1588572

帶調試代碼的小提琴會有幫助。 – 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/

來源

2013-03-20 06:17:54

我不得不編輯你的小提琴，使它按照我想要的方式行事，但你在那裏的某個地方是正確的。這就是我把它改爲：http://jsfiddle.net/RxTax/2/ – user1588572 2013-03-20 14:39:13

-1

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); 
     } 
    }); 
    });

來源

2014-01-16 09:13:43

它給錯誤**的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" />

來源

2016-04-15 21:44:50 Francisco

JQuery的UI日期選擇器結束日期開始日期後第1天

回答

相關問題