CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
Matt Coady
Matt Coady

Reputation: 3856

jQuery UI Picking a start and end date within range based on start date

I'm building a date picker in jQuery ui. What I'm trying to do is set a range, so when they pick the first date the second date appears and gives a 30 day window. I tried this but it doesn't work (it lets the user pick 30 days from today, not 30 from the start date):

var pickDate;
$( "#datepickerEnd" ).hide();
$( "#datepickerStart" ).datepicker();
$( "#datepickerStart" ).change(function(){
    var pickDate = $( "#datepickerStart" ).val();
    $( "#datepickerEnd" ).datepicker({ minDate: pickDate, maxDate: +30 });
    $( "#datepickerEnd" ).show();
})

Another issue I ran into is when I change datepickerStart it'll only set the start range once but not every time I change it. I have to refresh the page to lock in a new start date.

Upvotes: 14

Views: 106929

Answers (4)

Rahul Shinde
Rahul Shinde

Reputation: 1662

The HTML Markup consist of HTML Table consisting of two TextBoxes one for selecting the Start (From) date while other for selecting the End (To) date.

<input type="text" id="txtFrom" />
<input type="text" id="txtTo" />

Inside the jQuery document ready event handler, I am applying the jQuery DatePicker plugins to both the TextBoxes.

$(function () {
    $("#txtFrom").datepicker({
        numberOfMonths: 2,
        onSelect: function (selected) {
            var dt = new Date(selected);
            dt.setDate(dt.getDate() + 1);
            $("#txtTo").datepicker("option", "minDate", dt);
        }
    });

    $("#txtTo").datepicker({
        numberOfMonths: 2,
        onSelect: function (selected) {
            var dt = new Date(selected);
            dt.setDate(dt.getDate() - 1);
            $("#txtFrom").datepicker("option", "maxDate", dt);
        }
    });
});

There is number of months parameter is 2 if you want 1 then you can change it.

you can also add extra date picker parameter if any required above the number of months.

Upvotes: 0

Saurabh
Saurabh

Reputation: 39

$("#start_date").datepicker().on('changeDate', function(selected){
        startDate = new Date(selected.date.valueOf());
        $('#end_date').datepicker('setStartDate', startDate);
    });  

    $("#end_date").datepicker().on('changeDate', function(selected){
        startDate = new Date(selected.date.valueOf());
        $('#start_date').datepicker('setEndDate', startDate);
    });

Upvotes: 3

SirDerpington
SirDerpington

Reputation: 11460

Check this jsfiddle here. It's a working example of your problem.

HTML

<input type="text" id="dt1">
<input type="text" id="dt2">

JS

$(document).ready(function () {
    $("#dt1").datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0,
        onSelect: function () {
            var dt2 = $('#dt2');
            var startDate = $(this).datepicker('getDate');
            //add 30 days to selected date
            startDate.setDate(startDate.getDate() + 30);
            var minDate = $(this).datepicker('getDate');
            var dt2Date = dt2.datepicker('getDate');
            //difference in days. 86400 seconds in day, 1000 ms in second
            var dateDiff = (dt2Date - minDate)/(86400 * 1000);

            //dt2 not set or dt1 date is greater than dt2 date
            if (dt2Date == null || dateDiff < 0) {
                    dt2.datepicker('setDate', minDate);
            }
            //dt1 date is 30 days under dt2 date
            else if (dateDiff > 30){
                    dt2.datepicker('setDate', startDate);
            }
            //sets dt2 maxDate to the last day of 30 days window
            dt2.datepicker('option', 'maxDate', startDate);
            //first day which can be selected in dt2 is selected date in dt1
            dt2.datepicker('option', 'minDate', minDate);
        }
    });
    $('#dt2').datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0
    });
});

As soderslatt already mentioned use the onSelect option to set the dates. Other methods I used are:

I think they're all very self explanatory and the documentation helps you to understand how they work. If you want to set the date of the second datepicker to dt1's date + 1 day do the same as in this line:

startDate.setDate(startDate.getDate() + 30);

But of course add 1 day and not 30.

Upvotes: 35

anderssonola
anderssonola

Reputation: 2195

Try using the ui onSelect callback instead of .change(), http://api.jqueryui.com/datepicker/#option-onSelect

on init: 

var $datepickerStart = $("#datepickerStart");
$datepickerStart.datepicker({
    onSelect: function( selectedDate ) {
        $datepickerStart.datepicker( "option", "minDate", selectedDate );
    }
});

Upvotes: 2

Related Questions