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.

How to Set Minimum and Maximum Date in jQuery UI Datepicker


Contents

  1. maxDate
  2. minDate
  3. Example
  4. Demo
  5. Conclusion

1. 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('2018-3-26')
 });

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

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

Output 


2. 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('2017-12-5')
 });

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

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

Output


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

4. Demo

Click on the Textbox.


5. Conclusion

If you don’t want the user to select any day from the jQuery UI Datepicker then use the minDate and maxDate options to define the range where 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.
Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request.

4 thoughts on “How to Set Minimum and Maximum Date in jQuery UI Datepicker”

  1. Hi Yogesh. I must be missing something. If I want to present datetimepicker for appointment requests, and want to set the min date a user can request to a date that is at least 1week from today’s date, how would that look?
    I currently have:

    Date

    Time

    jQuery(‘#datepicker’).datetimepicker({
    timepicker:false,
    dateFormat: “yy-mm-dd”,
    minDate: “+1w”
    });
    jQuery(‘#timepicker’).datetimepicker({
    datepicker:false,
    });

    I am experiencing a few problems:
    1. when I separate date and time pickers, the time shows up in the date form field with the date
    2. when I separate date and time pickers, the date shows up in the time form field
    2. The min date does not seem to be working, I can select tomorrow’s date.

    Reply
  2. lease restrict the dates selection for the reports to previous -1 day till 7.30am and following which you can allow for previous day from 7.30am.
    Example,
    On 18/04/2020 prior to 7.30am, the date selection should be till 16/04/2020.
    After 7.30am, the date picker should allow till 17/04/2020.
    I have function working based on day and not on hours:-
    function dateP(){
    var today = new Date();
    $( “.datepicker” ).datepicker({
    dateFormat: “dd/mm/yy”,
    maxDate: “-1d”
    });
    $( “.datepickerYesterday” ).datepicker({
    dateFormat: “dd/mm/yy”,
    maxDate: “-1d”
    }).datepicker(“setDate”, -1);
    $(‘.datepickerMonthlyReport’).datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    maxDate: “-1M”,
    dateFormat: ‘mm/yy’,
    onChange: function(dateText, inst) {
    $(this).datepicker(‘setDate’, new Date(inst.selectedYear, inst.selectedMonth, 1));
    },
    beforeShow: function(el, dp) {
    $(‘#ui-datepicker-div’).addClass(‘hide-calendar’);
    },
    onClose: function(dateText, inst) {
    $(‘#ui-datepicker-div’).removeClass(‘hide-calendar’);
    $(this).datepicker(‘setDate’, new Date(inst.selectedYear, inst.selectedMonth, 1));
    }
    }).datepicker(“setDate”, new Date(today.getFullYear(),today.getMonth() – 1, 1));
    };

    dateP();

    Reply

Leave a Comment