-- - - -- This page lists some common setups for the popup calendar. In - order to see how to do any of them please see the source of this - page. For each example it's structured like this: there's the - <form> that contains the input field, and following there is - the JavaScript snippet that setups that form. An example of - flat calendar is available in another page. -
-- The code in this page uses a helper function defined in - "calendar-setup.js". With it you can setup the calendar in - minutes. If you're not that impatient, ;-) complete documenation is - available. -
-
Basic setup: one input per calendar. Clicking in the input field -activates the calendar. The date format is "%m/%d/%Y %I:%M %p". The -calendar defaults to "single-click mode".
- -The example below has been updated to show you how to create "linked" -fields. Basically, when some field is filled with a date, the other -is updated so that the difference between them remains one week. The -property useful here is "onUpdate".
- - - - - - - -Input field with a trigger button. Clicking the button activates -the calendar. Note that this one needs double-click (singleClick parameter -is explicitely set to false). Also demonstrates the "step" parameter -introduced in 0.9.6 (show all years in drop-down boxes, instead of every -other year as default).
- - - - - - - -Input field with a trigger image. Note that the Calendar.setup -function doesn't care if the trigger is a button, image, or anything else. -Also in this example we setup a different alignment, just to show how it's -done. The input field is read-only (that is set from HTML).
- - - - - - - -Hidden field, display area. The calendar now puts the date into 2 -elements: one is an input field of type "hidden"—so that the user -can't directly see or modify it— and one is a <span> element in -which the date is displayed. Note that if the trigger is not specified the -calendar will use the displayArea (or inputField as in the first example). -The display area can have it's own format. This is useful if, for instance, -we need to store one format in the database (thus pass it in the input -field) but we wanna show a friendlier format to the end-user.
- - - -Your birthday: - Click to open date selector.
- - - - - -Hidden field, display area, trigger image. Very similar to the -previous example. The difference is that we also have a trigger image.
- - - -Your birthday: -- not entered -- .
Hidden field, display area. Very much like the previous examples, -but we now disable some dates (all weekends, that is, Saturdays and -Sundays).
- - - -Your birthday: - Click to open date selector.
- - - - - -