How to Combine MinDate and Format DatePicker

Help site visitors select dates by showing them a virtual calendar.

When your Web page doesn't have enough room to hold a calendar control, make one appear like magic using the jQuery UI DatePicker control. Display one of these calendars, and site visitors can choose dates by clicking them. The effect is similar to those seen on sites that allow you to make reservations by clicking dates on a calendar. You can also format the JQuery UI DatePicker by setting its minimum date range using the minDate attribute.

Instructions

1. Open an HTML document and paste the following statement into your HTML document's head section:

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

   The first statement makes jQuery's basic functionality available in your code. The second statement gives your code access to the Jquery UI library that contains the JQuery UI Datepicker.

2. Add the following text box to your document's body section:

   <input id="text1" type="text" />

3. Paste the code shown below into the document's script section:

   $(function () {
   var minYear = 2011;
   var minMonth = 6;
   var minDay = 22;
   $("#text1").datepicker(
   {
   minDate: new Date(minYear, minMonth-1, minDay)
   }
   );
   });

   This example sets the minimum date as June 6, 2011 by assigning that date to the minDate attribute as shown. Change those values as needed to use different dates. The statement inside the function calls the jQuery UI Datepicker using your text box's ID as an argument.

4. Save your document and open it in a browser. Click the text box to view the calendar. The calendar displays the current month when it opens. Click one of the days and the calendar stores the selected date inside the text box.

Tips & Warnings

• Two buttons -- Prev and Next -- also appear at the top of the calendar. Clicking them takes you to the next and previous months.

• Clicking anywhere outside the calendar without selecting a date closes the calendar automatically.

References

• JQuery UI: Datepicker Demos & Documentation
• Google Code: Google Libraries API - Developer's Guide -

Resources

• JQuery UI: Datepicker Demos & Documentation