Jquery datepicker restrict dates in second date field based on selected date in first date field

Question

I am using Jquery date picker and I have the following code where when user selects a date, the field below is populated with date +1

$('#dt2').datepicker({
        dateFormat: "dd-M-yy" 
    });

$("#dt1").datepicker(
    {dateFormat: "dd-M-yy", 
    minDate:  0,
onSelect: function(date){
var date2 = $('#dt1').datepicker('getDate');
            date2.setDate(date2.getDate()+1);
            $('#dt2').datepicker('setDate', date2);

I would like to restrict dates in dt2 field which should not be below the date in dt1 field. E.g. If date selected in dt1 is 01-May-2013, then user is allowed to pick date after 01-May-2013, not less than 02-May-2013

How can I restrict date picking in date field 2?

SirDerpington · Accepted Answer · 2013-05-04 12:20:58Z

42

I created a jsfiddle for you. I'm not a 100% sure if it's "foolproof" but to prevent users from manually typing a date you could set the inputs to readonlye.g.

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

At the moment I check the dt2 onClose and if its date is below dt1s date I correct it. Also if a date is selected in dt1 the minDate of dt2 is set to dt1 date +1.

$(document).ready(function () {

    $("#dt1").datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0,
        onSelect: function (date) {
            var date2 = $('#dt1').datepicker('getDate');
            date2.setDate(date2.getDate() + 1);
            $('#dt2').datepicker('setDate', date2);
            //sets minDate to dt1 date + 1
            $('#dt2').datepicker('option', 'minDate', date2);
        }
    });
    $('#dt2').datepicker({
        dateFormat: "dd-M-yy",
        onClose: function () {
            var dt1 = $('#dt1').datepicker('getDate');
            var dt2 = $('#dt2').datepicker('getDate');
            //check to prevent a user from entering a date below date of dt1
            if (dt2 <= dt1) {
                var minDate = $('#dt2').datepicker('option', 'minDate');
                $('#dt2').datepicker('setDate', minDate);
            }
        }
    });
});

See the jsfiddle

answered May 4, 2013 at 12:20

SirDerpington

11.5k4 gold badges52 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

faerin Over a year ago

+1, that was exactly what I needed. Instead of your last if in #dt2 I added the readonly attribute to my input element.

Ingus Over a year ago

@SirDerpington can this be done just with javascript? and input type date?

SirDerpington Over a year ago

@IngusGraholskis I haven't had a real look but I guess it can be, yes. The input type date isn't supported by all major browsers yet though. Firefox for example lacks support if I'm correct. So you might want to give jQuery a go to have a reliable solution

SachinGutte · Accepted Answer · 2013-05-04 12:19:39Z

19

Here's how i do it --

DEMO

And the code is as follows

$('#dt2').datepicker({
    dateFormat: "dd-M-yy" 
});

$("#dt1").datepicker({
    dateFormat: "dd-M-yy", 
    minDate:  0,
    onSelect: function(date){            
        var date1 = $('#dt1').datepicker('getDate');           
        var date = new Date( Date.parse( date1 ) ); 
        date.setDate( date.getDate() + 1 );        
        var newDate = date.toDateString(); 
        newDate = new Date( Date.parse( newDate ) );                      
        $('#dt2').datepicker("option","minDate",newDate);            
    }
});

answered May 4, 2013 at 12:19

SachinGutte

7,0655 gold badges38 silver badges59 bronze badges

1 Comment

Lying_cat Over a year ago

Awesome answer.

kannan · Accepted Answer · 2014-01-25 06:26:32Z

5

i just changed your code, so that min date for date2 set automatically & if date1 is greater than date2, it set date2=date1

  $("#dt1").datepicker({
            dateFormat: "dd/mm/yy",
            onSelect: function (date) {
                var dt1 = $('#dt1').datepicker('getDate');
                var dt2 = $('#dt2').datepicker('getDate');
                if (dt1 > dt2) {
                    $('#dt2').datepicker('setDate', dt1);
                }
                $('#dt2').datepicker('option', 'minDate', dt1);
            }
        });
        $('#dt2').datepicker({
            dateFormat: "dd/mm/yy",
            minDate: $('#dt1').datepicker('getDate'),
            onClose: function () {
                var dt1 = $('#dt1').datepicker('getDate');
                var dt2 = $('#dt2').datepicker('getDate');
                //check to prevent a user from entering a date below date of dt1
                if (dt2 <= dt1) {
                    var minDate = $('#dt2').datepicker('option', 'minDate');
                    $('#dt2').datepicker('setDate', minDate);
                }
            }
        });

edited Jan 25, 2014 at 6:26

answered Jan 24, 2014 at 15:39

kannan

911 silver badge6 bronze badges

1 Comment

Simon27 Over a year ago

Even better - this seems like the right way to do this without annoying users.

Collectives™ on Stack Overflow

Jquery datepicker restrict dates in second date field based on selected date in first date field

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related