YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Calendar Control: Minimum/Maximum Dates

# Calendar Control: Minimum/Maximum Dates

Calendar can be easily configured to prevent users from being able to select dates before and after given minimum and maximum dates. This example specifies both a minimum and maximum date, but you can also specify just one of the two, if you only want to limit the range on one end.

View example in new window.

## Setting up the Calendar

For this tutorial, it is assumed that you are starting with the basic Calendar outlined in the Quickstart example. The setup for the basic Calendar looks like this:

YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container"); YAHOO.example.calendar.cal1.render();

Enabling the minimum and maximum date features is as easy as adding additional arguments to the constructor's configuration object. In this tutorial, we will be working with three different configuration properties: pagedate, mindate and maxdate. In brief, here is a description of these properties and what they do:

- pagedate - Specifies the month/year of the Calendar's initial view. For example, setting a value of "1/2009" would set the Calendar to January 2009.
- mindate - Specifies the minimum selectable date for the Calendar. All dates before the minimum date will be grayed out. The value can be specified as a JavaScript Date object or as a string (e.g. "1/5/2009").
- maxdate - Specifies the maximum selectable date for the Calendar. All dates after the maximum date will be grayed out. The value can be specified as a JavaScript Date object or as a string (e.g. "1/15/2009").

Of course, you can specify these properties independently for different results. For instance, if you only wanted users to be able to select days following August 2, 2009, you would set the mindate property to "8/2/2009" and no dates prior would be selectable.

For this example, we will set the current month view to January 2009 using the pagedate property, and we will limit the Calendar's minimum selectable date to January 5, and the maximum selectable date to January 15.

YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", { pagedate: "1/2009", mindate: "1/5/2009", maxdate: "1/15/2009" } ); YAHOO.example.calendar.cal1.render();

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### Calendar Control Examples:

- Quickstart Tutorial
- Multi-Select Calendar
- Multi-Page Calendar
- Minimum/Maximum Dates
- Calendar Navigator
- Handling Calendar Events
- Calendar and Text Fields
- Calendar and Select Fields
- Using the Render Stack
- Popup Calendar - Basic
- Popup Calendar - Advanced
- Interval Selection Calendar
- Localization - Germany
- Localization - Japan
- Localization - Taiwan (Year Offset)
- Skinning The Calendar
- Calendar Plugin (included with examples for Rich Text Editor)
- Inline Cell Editing (included with examples for DataTable Control)
- Using YUI Loader to Load the Calendar Control (included with examples for YUI Loader Utility)
- Simple Calendar Menu Button (included with examples for Button Control)
- Calendar Menu Button with Date on Button Face (included with examples for Button Control)
- Simple Application (included with examples for Layout Manager)
- Complex Application (included with examples for Layout Manager)
- Simple Profiling (included with examples for ProfilerViewer Control)

### More Calendar Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings