CODEWITHSUNDEEP
jquerydatepickerjquery-ui-datepicker
Jack Koh
Jack Koh

Reputation: 93

jQuery datapicker select-able date after user input start date and end date

First I use date range to get user input for start date and end date.

http://jqueryui.com/demos/datepicker/#date-range

How to set next input date only allow between user selected start date and end date ?

Upvotes: 1

Views: 358

Answers (1)

Ayman Safadi
Ayman Safadi

Reputation: 11552

Maybe you can try something like this: http://jsfiddle.net/vAT4R/

HTML

<input type="text" id="date1_start" />
<input type="text" id="date1_stop" />

<hr />

<input type="text" id="date2_start" />
<input type="text" id="date2_stop" />

JS

var dates2 = $( "#date2_start, #date2_stop" ).datepicker();

var dates = $( "#date1_start, #date1_stop" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onSelect: function( selectedDate ) {
        var option = this.id == "date1_start" ? "minDate" : "maxDate",
            instance = $( this ).data( "datepicker" ),
            date = $.datepicker.parseDate(
                instance.settings.dateFormat ||
                $.datepicker._defaults.dateFormat,
                selectedDate, instance.settings );
        dates.not( this ).datepicker( "option", option, date );
        dates2.datepicker( "option", option, date );
    }
});

Upvotes: 2

Related Questions