How to Set Minimum and Maximum Date in jQuery UI Datepicker

With jQuery UI it is easier to add Datepicker on the textbox element or in any other HTML elements.

If you like to restrict access of users to select a date within a range then there is minDate and maxDate options are available in jQuery UI.

Using this you can set the date range of the Datepicker.

After defining these options the other days will be disabled which are not in a defined range.

In this tutorial, I show you how to use both options in jQuery UI Datepicker to restrict the date range.

---

Contents

1. Download and Include
2. maxDate
3. minDate
4. Example
5. Demo
6. Conclusion

---

1. Download and Include

• Download jQuery and jQuery UI libraries.
• Include jQuery and jQuery UI library script –

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

 <!-- Script -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"

---

2. maxDate

This option allows defining maximum possible date selection after that dates are not selectable in the widget.

Its default value is null.

You can define option value in three ways –

• Date Object – A date object containing the maximum date.
• Number – Number of Days from Today. For example – if you have specified 5 then the maximum is set to the next 5 days from today, in case if you specify -5 that means earlier 5 days from today.
• String – You need to pass a value in the specified format. "y" for "year", "m" for "month",  "w" for "week", and "d" for "days". i.e. "+1m", "+1m+2w"

Example –

$(document).ready(function(){
    // Date Object
    $('#datepicker1').datepicker({
         dateFormat: "yy-mm-dd",
         maxDate: new Date('2023-2-12')
    });

    // Number
    $('#datepicker2').datepicker({
         dateFormat: "yy-mm-dd",
         maxDate: 2
    });

    // String
    $('#datepicker3').datepicker({
         dateFormat: "yy-mm-dd",
         maxDate: "+1m"
    });
}); 

View Demo

---

3. minDate

This option set minimum possible date selection to Datepicker widget. Its default value is also null.

It takes values in any of the forms – Date Object, Number, and String same as maxDate.

Example –

$(document).ready(function(){
    // Date Object
    $('#datepicker1').datepicker({
         dateFormat: "yy-mm-dd",
         minDate: new Date('2022-12-5')
    });

    // Number
    $('#datepicker2').datepicker({
         dateFormat: "yy-mm-dd",
         minDate: -3
    });

    // String
    $('#datepicker3').datepicker({
         dateFormat: "yy-mm-dd",
         minDate: "-3w"
    });
});

View Demo

---

4. Example

Using both maxDate and minDate options.

I am using String and Number value in options and set maxDate to 1 month 10 days from today and minDate to 10 days earlier.

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

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

    });

});
</script>

<div class='container'>
    <input type='text' id="datepicker" /> 
</div>

---

5. Demo

View Demo

---

6. Conclusion

Using the minDate and maxDate options you can control the user date selection. You can use number, string format, or a fixed date to set value.

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