How to Change Date range dynamically in jQuery UI Datepicker

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

You can specify date range with the minDate and maxDate option. That restrict the users to pick a date within your specified range.

In this tutorial, I show how to change date range dynamic of jQuery UI Datepicker.

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.

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

You can use this to refresh your datepicker according to the value e.g. you are using AJAX to get details and want to change date range of the widget.

Related Post

Spread the love

Be First to Comment

Leave a Reply

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