X-Git-Url: https://scm.cri.ensmp.fr/git/Plinn.git/blobdiff_plain/3c4367d8e03450e9a73e61f4247145d2b6c86a33..959d888c17d1403d2eeecc19bc4b5e2c8d1debf6:/Products/Plinn/skins/jscalendar/simple-1.html diff --git a/Products/Plinn/skins/jscalendar/simple-1.html b/Products/Plinn/skins/jscalendar/simple-1.html new file mode 100644 index 0000000..c2a944a --- /dev/null +++ b/Products/Plinn/skins/jscalendar/simple-1.html @@ -0,0 +1,244 @@ + + + + + +Simple calendar setups [popup calendar] + + + + + + + + + + + + + + + + + +

DHTML Calendar — for the impatient

+ +
+

+ 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.

+ + + + + +