开发者

jQuery Datepicker - Programatically Limit Second Datepicker

开发者 https://www.devze.com 2022-12-25 19:15 出处:网络
I\'ve recently been using the following piece of code to limit my 2nd Date picker (end date) so that it does not precede the da开发者_开发技巧te of the 1st Date picker.

I've recently been using the following piece of code to limit my 2nd Date picker (end date) so that it does not precede the da开发者_开发技巧te of the 1st Date picker.

$("#datepicker").datepicker({
 minDate: +5, 
 maxDate: '+1M +10D',  
 onSelect: function(dateText, inst){
           var the_date = dateText;
           $("#datepicker2").datepicker('option', 'minDate', the_date);

 }
 });
 $("#datepicker2").datepicker({

    maxDate: '+1M +10D', 
    onSelect: function(dateText, inst){

    }                       
});

However, lately, I wanted to format my datepickers using:

dateFormat: 'yy-mm-dd'

But now, the 2nd datepicker actually allows the user to pick a date 1 day before.

For example, if the user picks the 1st date: 2010-04-03, when the 2nd Datepicker pops up, they are able to pick 2010-04-02 (1 day before their first selected date).

I do not want the user to be able to pick a date that was before their first selected day.

Any ideas why this isn't working after I added in the "dateFormat"?


option minDate expect a date object not a string object.. you can however specify the format and do the conversion as follow:

$(document).ready(function() {  //Runs when tab is loaded

var dateFormat = "yy-mm-dd";

$("#datepicker").datepicker({
 minDate: +5, 
 dateFormat:dateFormat,
 maxDate: '+1M +10D',  
 onSelect: function(dateText, inst){
           var the_date = $.datepicker.parseDate(dateFormat,dateText);
           $("#datepicker2").datepicker('option', 'minDate', the_date)
 }
 });
 $("#datepicker2").datepicker({

    maxDate: '+1M +10D', 
    dateFormat:dateFormat,
    onSelect: function(dateText, inst){

    }                       
});


});


You could alternatively do this

       onSelect: function(){
           $("#datepicker2").datepicker('option', 'minDate', $(this).val());
       }
0

精彩评论

暂无评论...
验证码 换一张
取 消