jQuery UI DatePicker Date Range

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.

image


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.

image


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.

image


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.






About The Author

Suprotim Agarwal
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.

4 comments:

Web Development said...

thanks for sharing, this is useful.

مدیر سایت said...

thank you so much boss it was so usefull
GOOD LUCK
from
www.metalbaz.com

Anonymous said...

http://datepicker.org.ru/

StartappzKE said...

Awesome thanks