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 the third input box to see change.


3. Conclusion

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

If you found this tutorial helpful then don't forget to share.

6 thoughts on “How to Change Date range Dynamically in jQuery UI Datepicker”

  1. 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

    Reply
    • 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 );

      Reply
  2. 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

    Reply
    • 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.

      Reply

Leave a Comment