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

Posted 2021-03-31

所以我试图限制用户使用jQuery UI日期范围选择器（http://jqueryui.com/datepicker/#date-range）选择签出日期与签入日期相同。我有它在他们无法在登记入住日期之前选择，但截至目前，登记日期和退房日期可以是相同的文件。这是jquery

  $(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天。先感谢您

答案

您无法使用此代码添加天数$（“＃check-in”）。datepicker（“option”，“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/

另一答案

更改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天

http://jsfiddle.net/wskhcgdq/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);
        }
    });
  });