JQuery UI date picker end date 1 day after start date

Question

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

  });

This is the 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>

What I want is the check out date to default to 1 day after the check in date every time the check-in date is selected. Thank you in advance

A fiddle with code to debug would be helpful. – DrCord Mar 19 '13 at 23:32 — DrCord, Mar 19 '13 at 23:32

score 4 · Accepted Answer · answered Mar 20 '13 at 06:17

4

You can't add days using this code $( "#check-in" ).datepicker( "option", "maxDate", selectedDate +"+1D")

Try this instead:

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

Here's the fiddle: http://jsfiddle.net/RxTax/1/

answered Mar 20 '13 at 06:17

Setrákus Ra

255
1
8

I had to edit your fiddle to make it behave the way I wanted but you were right one somewhere in there. This is what I changed it to: http://jsfiddle.net/RxTax/2/ – user1588572 Mar 20 '13 at 14:39

Mohit Kumar Gupta · Answer 2 · 2019-02-11T14:18:34.697

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

it is giving error **ReferenceError: maxDate is not defined** [Break On This Error] minDate.setDate(maxDate.getDate() + 1); — Swarna Sekhar Dhar, Mar 15 '16 at 09:59

Francisco · Answer 3 · 2016-04-18T21:39:22.583

change minDate.setDate(maxDate.getDate() + 1); to minDate.setDate(minDate.getDate() + 1);

the fact is that is just working with dateFormat: "yy-mm-dd" and not with other dateFormat as regional fr or alike.

I have written a work-around for other dateFormats using alternate fields. I tested on IE chrome and Firefox and works quite good.

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 date picker end date 1 day after start date

3 Answers3