11

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?

3 Answers 3

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

3
  • +1, that was exactly what I needed. Instead of your last if in #dt2 I added the readonly attribute to my input element.
    – faerin
    Mar 20, 2015 at 21:54
  • @SirDerpington can this be done just with javascript? and input type date?
    – Ingus
    Jun 30, 2017 at 6:16
  • 1
    @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 Jun 30, 2017 at 7:06
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);            
    }
});
1
  • 1
    Awesome answer.
    – Lying_cat
    May 23, 2018 at 4:48
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);
                }
            }
        });
1
  • 2
    Even better - this seems like the right way to do this without annoying users.
    – Simon27
    Sep 2, 2014 at 16:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.