How to Change Date range Dynamically in jQuery UI Datepicker

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

With minDate and maxDate options you can specify the date range. It restricts 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.

In this tutorial, I show how you can dynamically set date range in jQuery UI datepicker.

How to Change Date range Dynamically in jQuery UI Datepicker

Demo Download

Set relative dates
Dynamically set date range
Conclusion

1. Set relative dates

Include jQuery and jQuery UI library –

<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<!-- jQuery UI JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

HTML –

Create a single input element for initializing datepicker.

Script –

Call datepicker() method on the input element.
Specified 3 options –
- dateFormat – Set date format.
- maxDate – Set max selection date. In the example, I set it to +1m +10d means 1 month and 10 days from today.
- minDate – Set minimum selection date. In the example, I set it to -10 means subtract 10 days from today.

Completed Code

<script type='text/javascript'>
$(document).ready(function(){

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

<div class='container'>
   Select Date : <input type='text' id="datepicker" readonly /> 
</div>

2. Dynamically set date range

# 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

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

<script>
$(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));
       }
   });
 
});
</script>

# 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

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

<script>
$(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));
       }
   });
});
</script>

View Demo

3. Conclusion

You can follow any of the above steps to add date range validation.

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.

Contents

1. Set relative dates

2. Dynamically set date range

3. Conclusion