how to disable future dates based on some datepicker value in jquery datepicker

Question

I am using jquery datepicker and I have 4 dates:start_date,end_date,publishing_date and departure_date.Here based on start_date I want to disable future dates upto start_date and similarly based on end_date I want to disable past dates from end date. I am not able to do so, tried many option as onSelect but I just can't get the required disabling.Here is my jquery code.

var dateToday = new Date();
var dates = $("#start_date, #end_date").datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: dateToday,
    onSelect: function(selectedDate) {
        var option = this.id == "start_date" ? "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);
    }
});

$('#departure_date').datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: $('#end_date').datepicker({
        dateFormat: 'dd-mm-yy'
    }).val()
});

$('#publishing_date').datepicker({
    dateFormat: 'yy-mm-dd',
    maxDate: $('#start_date').datepicker({
        dateFormat: 'dd-mm-yy'
    }).val()
});

Any suggestions/help is welcome.Thanks in advance.

Also tried using as follows but to no avail.

$('#publishing_date').datepicker({
    dateFormat: 'yy-mm-dd',
    maxDate : ($.datepicker.formatDate('yy-mm-dd', $('#start_date').datepicker("getDate")))
});

samjhana joshi · Accepted Answer · 2013-12-26 11:25:52Z

Based on suggestions by @Mahesh Sapkal I made following changes to my code.

var dateToday = new Date();
var dates = $("#start_date, #end_date").datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: dateToday,
    onSelect: function(selectedDate) {
          var option = this.id == "start_date" ? "minDate" : "maxDate",
          instance = $(this).data("datepicker"),
          date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
          if(this.id == "start_date"){
                   $("#publishing_date").datepicker({
                         dateFormat: 'yy-mm-dd',
                         minDate: dateToday,
                         maxDate: date
                    });
          }
          if(this.id == 'end_date'){
                   $("#departure_date").datepicker({
                         dateFormat: 'yy-mm-dd',
                         minDate: date
                   })
          }
          dates.not(this).datepicker("option", option, date);
     }

}); Don't know why but his suggestion of $( "#departure_date" ).datepicker( "option", "minDate",date ); isn't working for me.

Deepak Saralaya · Accepted Answer · 2013-12-26 10:21:36Z

1

try this

 $("#start_date").datepicker({
dateFormat: 'dd-mm-yy',
minDate: "+0D",
onSelect: function (selectedDate) {
    var d = parseInt(selectedDate.substring(0, 2));
    var m = parseInt(selectedDate.substring(3, 5));
    var y = parseInt(selectedDate.substring(6, 10));
    var newDate = new Date(y, m - 1, d + 1);
    $("#departure_date").datepicker("option", "minDate", newDate);
}
});

$("#departure_date").datepicker({
dateFormat: 'dd-mm-yy',
minDate: "+0D",
onSelect: function (selectedDate) {
    var d = parseInt(selectedDate.substring(0, 2));
    var m = parseInt(selectedDate.substring(3, 5));
    var y = parseInt(selectedDate.substring(6, 10));
    var newDate = new Date(y, m - 1, d + 1);
    $("#publishing_date").datepicker("option", "minDate", newDate);
   }
 });

answered Dec 26, 2013 at 10:21

Deepak Saralaya

4574 silver badges12 bronze badges

2 Comments

samjhana joshi Over a year ago

what about end_date.It should be dependent on start_date.How do I do this.

Deepak Saralaya Over a year ago

In start date on select write $("#end_date").datepicker("option", "minDate", newDate);

msapkal · Accepted Answer · 2013-12-26 10:46:58Z

1

You need to set the departure_date & publishing_date after initialization.

Try this.

 onSelect: function(selectedDate) {
        var option = this.id == "start_date" ? "minDate" : "maxDate",
        instance = $(this).data("datepicker"),
        date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);

        if(this.id === "end_date") {
            $( "#departure_date" ).datepicker( "option", "minDate",date );
        } else {
            $( "#publishing_date" ).datepicker( "option", "maxDate",date );
        }

    }

edited Dec 26, 2013 at 10:46

answered Dec 26, 2013 at 10:37

msapkal

8,3462 gold badges34 silver badges48 bronze badges

Comments

Chocoboboy · Accepted Answer · 2013-12-26 10:06:07Z

0

use beforeShowDay option to do this.

answered Dec 26, 2013 at 10:06

Chocoboboy

1001 silver badge8 bronze badges

Collectives™ on Stack Overflow

how to disable future dates based on some datepicker value in jquery datepicker

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related