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.



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 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.

lo 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