How to Set minimum and maximum date dynamically in jquery UI date picker

Question

I have put two datepikcer from date and to date in my webpage for generate report. I want to apply validation on both datepicker for selection of date. I have write common jquery code for set minimum and maximum date of both datepikcer but it did not work for me. I have also write code for set minimum and maximum date on close of datepicker.

My requirement is that I want to set minimum and maximum date dynamically when datepicker is initialize. Then after also set another maximum and minimum date when user can select date from any datepicker

$("#frm_date").datepicker({
 showOn: 'button', 
 buttonImage: 'images/calendar.gif', 
 buttonImageOnly: true,
 dateFormat:'yy-mm-dd',
 onClose: function( selectedDate ) {
                            $( "#to_date" ).datepicker( "option", "minDate", selectedDate );
               }
});


 $("#to_date").datepicker({
 showOn: 'button', 
 buttonImage: 'images/calendar.gif', 
 buttonImageOnly: true,
 dateFormat:'yy-mm-dd',
 onClose: function( selectedDate ) {
                      $("#frm_date" ).datepicker( "option", "maxDate", selectedDate );
                   }
 });

$(".datepick").datepicker({dateFormat:'yy-mm-dd',minDate:'2013-09-10' ,maxDate:'2013-10-10'});

Hkachhia · Accepted Answer · 2013-10-11 06:06:32Z

I have solved my problem using below code.
Also see below solution on jquery forum site. https://forum.jquery.com/topic/how-to-set-minimum-and-maximum-date-dynamically-in-jquery-ui-date-picker

$.datepicker.setDefaults({
          showOn: 'button', 
          buttonImage: 'images/calendar.gif', 
          buttonImageOnly: true,
          dateFormat: 'yy-mm-dd',
          minDate: '2013-09-10',
          maxDate: '2013-10-10'
    });
    $('#frm_date').datepicker({
          onSelect: function(selectedDate) {
                $('#to_date').datepicker('option', 'minDate', selectedDate || '2013-09-10');
          }
    });
    $('#to_date').datepicker({
          onSelect: function(selectedDate) {
                $('#frm_date').datepicker('option', 'maxDate', selectedDate || '2013-10-10');
          }
    });

    $(".datepick").datepicker({dateFormat:'yy-mm-dd',minDate:'2013-09-10' ,maxDate:'2013-10-10'});

amantur · Accepted Answer · 2013-10-11 04:45:09Z

0

You can call beforeShow method to set any option just before calendar is shown:

$("#to_date").datepicker({
    beforeShow:function(){
        $(this).datepicker('option',
                            {
                                minDate:new Date()
                             }
                          );
    }
});

answered Oct 11, 2013 at 4:45

amantur

40.6k22 gold badges136 silver badges192 bronze badges

Collectives™ on Stack Overflow

How to Set minimum and maximum date dynamically in jquery UI date picker

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related