0

所以我试图限制用户使用 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 天。先感谢您

4

3 回答 3

4

您不能使用此代码添加日期 $( "#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/

于 2013-03-20T06:17:54.427 回答
0

JQuery UI date picker end date 1 day after start date

http://jsfiddle.net/wskhcgdq/1/

You can't add days using this code 

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

Try this instead:

 $(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-16T09:13:43.730 回答
0

更改 minDate.setDate(maxDate.getDate() + 1); 到 minDate.setDate(minDate.getDate() + 1);

事实上，这只是使用 dateFormat: "yy-mm-dd" 而不是使用其他 dateFormat 作为区域 fr 或类似的。

我已经使用备用字段为其他 dateFormats 编写了解决方法。我在 IE chrome 和 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-15T21:44:50.753 回答