How to Change Date range Dynamically in jQuery UI Datepicker

The jQuery UI Datepicker widget allows us to pick a from the widget. It has various options by using them you can customize it.

With minDate and maxDate options specify the date range. That restrict the users to pick a date within the specified range.

The value of minDate and maxDate options values can also be defined dynamically at the runtime.

How to Change Date range Dynamically in jQuery UI Datepicker

 


Contents

  1. Initialize
  2. Dynamically set
  3. Conclusion

 

1. Initialize

Steps to add Datepicker –

<link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
<script src='jquery-ui.min.js' type='text/javascript'></script>
  • Create HTML layout.

Here, I have created 3 input boxes the first two are for setting date range and another one for applying changes.

<div class='container'>
  Minimum : <input type='text' id='setMin' ><br/>
  Maximum : <input type='text' id='setMax' ><br/>
  <br/>
  Select Date : <input type='text' id="datepicker" />
</div>
  • Call datepicker() method on the input elements and set date range.
$(document).ready(function(){ 

 $("#setMin,#setMax").datepicker({
  dateFormat: "yy-mm-dd"
 });

 $('#datepicker').datepicker({
  dateFormat: "yy-mm-dd",
  maxDate:'+1m +10d',
  minDate: -10
 });

});

Here, I have used dateFormat option to adjust the date format.

Completed Code

<link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
<script src='jquery-3.0.0.js' type='text/javascript'></script>
<script src='jquery-ui.min.js' type='text/javascript'></script>
 
<script type='text/javascript'>
$(document).ready(function(){
 
 // Initialize Date picker 
 $("#setMin,#setMax").datepicker({
  dateFormat: "yy-mm-dd"
 });

 $('#datepicker').datepicker({
  dateFormat: "yy-mm-dd",
  maxDate:'+1m +10d',
  minDate: -10
 });
});
</script>

<div class='container'>
 Minimum : <input type='text' id='setMin' readonly ><br/>
 Maximum : <input type='text' id='setMax' readonly ><br/>
 <br/>
 Select Date : <input type='text' id="datepicker" readonly /> 
</div>

Output

You don’t see the changes in the datepicker of the third input box. That I did in next step.


 

2. Dynamically set

# Method 1

Change the value of minDate and maxDate options.

In the example, I initialized the datepicker on 3 input elements.

Read the values of first two input box to set the value of minDate and maxDate option of the third datepicker.

Completed Code 

$(document).ready(function(){
 
 // Initialize Date picker 
 $("#setMin,#setMax").datepicker({
  dateFormat: "yy-mm-dd"
 });

 $('#datepicker').datepicker({
  dateFormat: "yy-mm-dd",
  maxDate:'+1m +10d',
  minDate: -10
 });

 // Changing date range
 $('#setMin,#setMax').change(function(){
 
  // Get value
  var minDate = $("#setMin").val();
  var maxDate = $("#setMax").val();

  // Set minDate and maxDate
  if(minDate != ''){
   $('#datepicker').datepicker('option', 'minDate', new Date(minDate));
  }
 
  if(maxDate != ''){
   $('#datepicker').datepicker('option', 'maxDate', new Date(maxDate));
  }
 });
 
});

# Method 2

If the above script doesn’t work then you can use the below code where I first destroy the datepicker then recreate it and specify the new value in options.

Completed Code

$(document).ready(function(){
 
 // Initialize Date picker 
 $("#setMin,#setMax").datepicker({
  dateFormat: "yy-mm-dd"
 });

 $('#datepicker').datepicker({
  dateFormat: "yy-mm-dd",
  maxDate:'+1m +10d',
  minDate: -10
 });

 // Changing date range
 $('#setMin,#setMax').change(function(){
 
  // Get value
  var minDate = $("#setMin").val();
  var maxDate = $("#setMax").val();

  // Destroy 
  $('#datepicker').datepicker('destroy');

  // Initialize
  $('#datepicker').datepicker({
   dateFormat: "yy-mm-dd",
  });

  // Set minDate and maxDate
  if(minDate != ''){
   $('#datepicker').datepicker('option', 'minDate', new Date(minDate));
  }
 
  if(maxDate != ''){
   $('#datepicker').datepicker('option', 'maxDate', new Date(maxDate));
  }
 });
});

Output

Select your date range and click on third input box to see change.


 

3. Conclusion

Update the value of minDate and maxDate option of the datepicker element with your range values.

Related Post

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  

5 Comments

  1. Gabriel said:

    Thanks man! It was useful for me

    July 19, 2017
    Reply
  2. sahil said:

    i have a input date field
    I have a add button to append the date field
    i want when the add button is clicked new date(incremented by 1 day of previous day)
    again on clicking the add button the previous date gets incremented

    June 20, 2018
    Reply
    • Yogesh Singh said:

      You can use following code on button click to increment by 1 day to the selected date –

      var date1 = $(‘#datepicker’).datepicker(‘getDate’);
      var date = new Date( Date.parse( date1 ) );
      date.setDate( date.getDate() + 1 );

      var newDate = date.toDateString();
      newDate = new Date( Date.parse( newDate ) );

      $(‘#datepicker’).datepicker(‘setDate’, newDate );

      June 20, 2018
      Reply
  3. Suman Sarkar said:

    Hello
    Thanks man! It was work perfect for me.I need to show image after date picker text box thats why i add buttonImage and buttonImageOnly parameter but its not work.Can you please help me to solve this issue.

    Thanks

    September 24, 2018
    Reply
    • Yogesh Singh said:

      Hi Suman,

      I also tried but an image is successfully added using buttonImage and buttonImageOnly.

      <div id='container'>
      Select Date : <input type='text' id="datepicker" readonly />
      
      </div>
      
      <script type='text/javascript'>
      $(document).ready(function() {
      $('#datepicker').datepicker({
      showOn: "both",
      buttonImage: "calender.png",
      buttonImageOnly: true
      
      });
      });
      </script>

      Here, is the demo link.

      September 24, 2018
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *