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
  •  
  •  
  •  
  •  
  • 2
  •  
  •  

One Comment

  1. Gabriel said:

    Thanks man! It was useful for me

    July 19, 2017
    Reply

Leave a Reply

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