CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-datepicker
Cisum Inas
Cisum Inas

Reputation: 12990

Datepicker from and to minimum one day

I'm playing around to make a datepicker work for a reservation purpose.
The code below works almost exactly as I want it to.
The problem is: I don't want the "to" datepicker to allow anything below one day into the future.

So for instance if "From" is 25/09/13 I want "To" to be at least 26/09/13.
What do I need to change to make this the way I want it?

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://jqueryui.com/datepicker//resources/demos/style.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>

    $(function() {
        $( "#from" ).datepicker({
            defaultDate: "+0w",
            changeMonth: true,
            numberOfMonths: 1,
            minDate: -0,
            onClose: function( selectedDate ) {
                $( "#to" ).datepicker( "option", "minDate" , selectedDate );
        }
        });

        $( "#to" ).datepicker({
            defaultDate: "+0w",
            changeMonth: true,
            numberOfMonths: 1,
            onClose: function( selectedDate ) {
                $( "#from" ).datepicker( "option", selectedDate );
        }
        });
    });

</script>

<form action="?q=Reservation" method="post">
    <label for="from">From</label>
    <input type="text" id="from" name="from" />
    <label for="to">to</label>
    <input type="text" id="to" name="to" />

    First name: <input type="text" name="FirstName" value="Mickey"><br>
    Last name: <input type="text" name="LastName" value="Mouse"><br>
    <input type="submit" value="Submit">
</form>

Upvotes: 2

Views: 2544

Answers (3)

nbar
nbar

Reputation: 6158

The easiest way to do this would be:

$( ".selector" ).datepicker({ minDate: -1, maxDate: 1 });

Upvotes: 0

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can do the following:

 $("#from").datepicker({
     defaultDate: "+0w",
     changeMonth: true,
     numberOfMonths: 1,
     minDate: -0,
     onClose: function (selectedDate) {
         var date2 = $('#from').datepicker('getDate');
         date2.setDate(date2.getDate() + 1);
         $("#to").datepicker("option", "minDate", date2);
     }
 });

So you get the current from date and add one day to it using setDate, then you set the minDate option as you thought.

Demo: http://jsfiddle.net/IrvinDominin/tSrGx/

Upvotes: 2

Matthew
Matthew

Reputation: 9949

It looks to me like you are doing it right, just add a day to selectedDate:

var newDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()+1);
$( "#to" ).datepicker( "option", "minDate" , newDate);

Upvotes: 1

Related Questions