+++ /dev/null
-<html style="background-color: buttonface; color: buttontext;">
-
-<head>
-<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
-
-<title>Simple calendar setups [popup calendar]</title>
-
- <!-- calendar stylesheet -->
- <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
-
- <!-- main calendar program -->
- <script type="text/javascript" src="calendar.js"></script>
-
- <!-- language for the calendar -->
- <script type="text/javascript" src="lang/calendar-en.js"></script>
-
- <!-- the following script defines the Calendar.setup helper function, which makes
- adding a calendar a matter of 1 or 2 lines of code. -->
- <script type="text/javascript" src="calendar-setup.js"></script>
-
-</head>
-
-<body>
-
-<h2>DHTML Calendar — for the impatient</h2>
-
- <blockquote>
- <p>
- 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
- <em>flat</em> calendar is available in <a
- href="simple-2.html">another page</a>.
- </p>
- <p>
- 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 <em>that</em> impatient, ;-) <a
- href="doc/html/reference.html">complete documenation</a> is
- available.
- </p>
- </blockquote>
-
-
-
-<hr />
-
-<p><b>Basic setup: one input per calendar.</b> 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".</p>
-
-<p>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".</p>
-
-<form action="#" method="get">
-<input type="text" name="date" id="f_date_a" />
-<input type="text" name="date" id="f_calcdate" />
-</form>
-
-<script type="text/javascript">
- function catcalc(cal) {
- var date = cal.date;
- var time = date.getTime()
- // use the _other_ field
- var field = document.getElementById("f_calcdate");
- if (field == cal.params.inputField) {
- field = document.getElementById("f_date_a");
- time -= Date.WEEK; // substract one week
- } else {
- time += Date.WEEK; // add one week
- }
- var date2 = new Date(time);
- field.value = date2.print("%Y-%m-%d %H:%M");
- }
- Calendar.setup({
- inputField : "f_date_a", // id of the input field
- ifFormat : "%Y-%m-%d %H:%M", // format of the input field
- showsTime : true,
- timeFormat : "24",
- onUpdate : catcalc
- });
- Calendar.setup({
- inputField : "f_calcdate",
- ifFormat : "%Y-%m-%d %H:%M",
- showsTime : true,
- timeFormat : "24",
- onUpdate : catcalc
- });
-</script>
-
-
-
-<hr />
-
-<p><b>Input field with a trigger button.</b> 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).</p>
-
-<form action="#" method="get">
-<input type="text" name="date" id="f_date_b" /><button type="reset" id="f_trigger_b">...</button>
-</form>
-
-<script type="text/javascript">
- Calendar.setup({
- inputField : "f_date_b", // id of the input field
- ifFormat : "%m/%d/%Y %I:%M %p", // format of the input field
- showsTime : true, // will display a time selector
- button : "f_trigger_b", // trigger for the calendar (button ID)
- singleClick : false, // double-click mode
- step : 1 // show all years in drop-down boxes (instead of every other year as default)
- });
-</script>
-
-
-
-<hr />
-
-<p><b>Input field with a trigger image.</b> 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).</p>
-
-<form action="#" method="get">
-<table cellspacing="0" cellpadding="0" style="border-collapse: collapse"><tr>
- <td><input type="text" name="date" id="f_date_c" readonly="1" /></td>
- <td><img src="img.gif" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Date selector"
- onmouseover="this.style.background='red';" onmouseout="this.style.background=''" /></td>
-</table>
-</form>
-
-<script type="text/javascript">
- Calendar.setup({
- inputField : "f_date_c", // id of the input field
- ifFormat : "%B %e, %Y", // format of the input field
- button : "f_trigger_c", // trigger for the calendar (button ID)
- align : "Tl", // alignment (defaults to "Bl")
- singleClick : true
- });
-</script>
-
-
-
-<hr />
-
-<p><b>Hidden field, display area.</b> 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.</p>
-
-<form action="#" method="get" style="visibility: hidden">
-<input type="hidden" name="date" id="f_date_d" />
-</form>
-
-<p>Your birthday:
- <span style="background-color: #ff8; cursor: default;"
- onmouseover="this.style.backgroundColor='#ff0';"
- onmouseout="this.style.backgroundColor='#ff8';"
- id="show_d"
- >Click to open date selector</span>.</p>
-
-<script type="text/javascript">
- Calendar.setup({
- inputField : "f_date_d", // id of the input field
- ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored)
- displayArea : "show_d", // ID of the span where the date is to be shown
- daFormat : "%A, %B %d, %Y",// format of the displayed date
- align : "Tl", // alignment (defaults to "Bl")
- singleClick : true
- });
-</script>
-
-
-
-<hr />
-
-<p><b>Hidden field, display area, trigger image.</b> Very similar to the
-previous example. The difference is that we also have a trigger image.</p>
-
-<form action="#" method="get" style="visibility: hidden">
-<input type="hidden" name="date" id="f_date_e" />
-</form>
-
-<p>Your birthday: <span id="show_e">-- not entered --</span> <img
-src="img.gif" id="f_trigger_e" style="cursor: pointer; border: 1px solid
-red;" title="Date selector" onmouseover="this.style.background='red';"
-onmouseout="this.style.background=''" />.</p>
-
-<script type="text/javascript">
- Calendar.setup({
- inputField : "f_date_e", // id of the input field
- ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored)
- displayArea : "show_e", // ID of the span where the date is to be shown
- daFormat : "%A, %B %d, %Y",// format of the displayed date
- button : "f_trigger_e", // trigger button (well, IMG in our case)
- align : "Tl", // alignment (defaults to "Bl")
- singleClick : true
- });
-</script>
-
-
-
-<hr />
-
-<p><b>Hidden field, display area.</b> Very much like the previous examples,
-but we now disable some dates (all weekends, that is, Saturdays and
-Sundays).</p>
-
-<form action="#" method="get" style="visibility: hidden">
-<input type="hidden" name="date" id="f_date_f" />
-</form>
-
-<p>Your birthday:
- <span style="background-color: #ff8; cursor: default;"
- onmouseover="this.style.backgroundColor='#ff0';"
- onmouseout="this.style.backgroundColor='#ff8';"
- id="show_f"
- >Click to open date selector</span>.</p>
-
-<script type="text/javascript">
- Calendar.setup({
- inputField : "f_date_f", // id of the input field
- ifFormat : "%Y/%d/%m", // format of the input field (even if hidden, this format will be honored)
- displayArea : "show_f", // ID of the span where the date is to be shown
- daFormat : "%A, %B %d, %Y",// format of the displayed date
- align : "Tl", // alignment (defaults to "Bl")
- dateStatusFunc : function (date) { // disable weekend days (Saturdays == 6 and Subdays == 0)
- return (date.getDay() == 6 || date.getDay() == 0) ? true : false;
- }
- });
-</script>
-
-
-</body>
-</html>
projects / Plinn.git / blobdiff