jQuery UI DatePicker Date Range

Tweet

In this post, I will show you how to specify Date Range for the jQuery UI DatePicker control, using the maxDate and minDate options.

The Current Date for these examples is assumed to be 10th September, 2010.

Specify Date Range in Months - You can specify selectable months in the DatePicker as shown below:

<script type="text/javascript">
        $(function () {
          $("#datepic").datepicker({ minDate: 0, maxDate: '+1M' });
        });
</script>

The above code makes only the current date and one month, starting from the current date, selectable. Rest all the dates are disabled as shown below.

Specify DateRange in Weeks - You can specify selectable weeks in the DatePicker as shown below:

<script type="text/javascript">
        $(function () {
          $("#datepic").datepicker({ minDate: '-1w', maxDate: '+2w' });
        });
</script>

The above code sets the selectable range to 2 weeks from the current day and 1 week prior to the Current Day. Rest all the dates are not selectable.

Specify Date Range in Days – You can specify selectable days in the DatePicker as shown below:

<script type="text/javascript">
        $(function () {
          $("#datepic").datepicker({ minDate: '-6d', maxDate: '+6d' });
        });
</script>

The above code restricts the user to select dates only within the range of 6 days before and 6 days after, the current day.

Note: The different periods that can be used in the DatePicker are as follows - 'y' for years, 'm' for months, 'w' for weeks and 'd' for days. You can also specify a combination of periods like '+1y +3m +2w +6d' which is equal to 1 Year, 3 Months, 2 Weeks and 6 days.

Note: The user can directly type in the textbox and override the restrictions you have set on the datepicker. It is advised to always use server-side validation in addition to client-side validation.

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.