skins/jscalendar/simple-1.html

   1 <html style="background-color: buttonface; color: buttontext;">
   2
   3 <head>
   4 <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
   5
   6 <title>Simple calendar setups [popup calendar]</title>
   7
   8   <!-- calendar stylesheet -->
   9   <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
  10
  11   <!-- main calendar program -->
  12   <script type="text/javascript" src="calendar.js"></script>
  13
  14   <!-- language for the calendar -->
  15   <script type="text/javascript" src="lang/calendar-en.js"></script>
  16
  17   <!-- the following script defines the Calendar.setup helper function, which makes
  18        adding a calendar a matter of 1 or 2 lines of code. -->
  19   <script type="text/javascript" src="calendar-setup.js"></script>
  20
  21 </head>
  22
  23 <body>
  24
  25 <h2>DHTML Calendar &mdash; for the impatient</h2>
  26
  27       <blockquote>
  28         <p>
  29           This page lists some common setups for the popup calendar.  In
  30           order to see how to do any of them please see the source of this
  31           page.  For each example it's structured like this: there's the
  32           &lt;form&gt; that contains the input field, and following there is
  33           the JavaScript snippet that setups that form.  An example of
  34           <em>flat</em> calendar is available in <a
  35             href="simple-2.html">another page</a>.
  36         </p>
  37         <p>
  38           The code in this page uses a helper function defined in
  39           "calendar-setup.js".  With it you can setup the calendar in
  40           minutes.  If you're not <em>that</em> impatient, ;-) <a
  41           href="doc/html/reference.html">complete documenation</a> is
  42           available.
  43         </p>
  44       </blockquote>
  45
  46
  47
  48 <hr />
  49
  50 <p><b>Basic setup: one input per calendar.</b> Clicking in the input field
  51 activates the calendar.  The date format is "%m/%d/%Y %I:%M %p".  The
  52 calendar defaults to "single-click mode".</p>
  53
  54 <p>The example below has been updated to show you how to create "linked"
  55 fields.  Basically, when some field is filled with a date, the other
  56 is updated so that the difference between them remains one week.  The
  57 property useful here is "onUpdate".</p>
  58
  59 <form action="#" method="get">
  60 <input type="text" name="date" id="f_date_a" />
  61 <input type="text" name="date" id="f_calcdate" />
  62 </form>
  63
  64 <script type="text/javascript">
  65     function catcalc(cal) {
  66         var date = cal.date;
  67         var time = date.getTime()
  68         // use the _other_ field
  69         var field = document.getElementById("f_calcdate");
  70         if (field == cal.params.inputField) {
  71             field = document.getElementById("f_date_a");
  72             time -= Date.WEEK; // substract one week
  73         } else {
  74             time += Date.WEEK; // add one week
  75         }
  76         var date2 = new Date(time);
  77         field.value = date2.print("%Y-%m-%d %H:%M");
  78     }
  79     Calendar.setup({
  80         inputField     :    "f_date_a",   // id of the input field
  81         ifFormat       :    "%Y-%m-%d %H:%M",       // format of the input field
  82         showsTime      :    true,
  83         timeFormat     :    "24",
  84         onUpdate       :    catcalc
  85     });
  86     Calendar.setup({
  87         inputField     :    "f_calcdate",
  88         ifFormat       :    "%Y-%m-%d %H:%M",
  89         showsTime      :    true,
  90         timeFormat     :    "24",
  91         onUpdate       :    catcalc
  92     });
  93 </script>
  94
  95
  96
  97 <hr />
  98
  99 <p><b>Input field with a trigger button.</b> Clicking the button activates
 100 the calendar.  Note that this one needs double-click (singleClick parameter
 101 is explicitely set to false).  Also demonstrates the "step" parameter
 102 introduced in 0.9.6 (show all years in drop-down boxes, instead of every
 103 other year as default).</p>
 104
 105 <form action="#" method="get">
 106 <input type="text" name="date" id="f_date_b" /><button type="reset" id="f_trigger_b">...</button>
 107 </form>
 108
 109 <script type="text/javascript">
 110     Calendar.setup({
 111         inputField     :    "f_date_b",      // id of the input field
 112         ifFormat       :    "%m/%d/%Y %I:%M %p",       // format of the input field
 113         showsTime      :    true,            // will display a time selector
 114         button         :    "f_trigger_b",   // trigger for the calendar (button ID)
 115         singleClick    :    false,           // double-click mode
 116         step           :    1                // show all years in drop-down boxes (instead of every other year as default)
 117     });
 118 </script>
 119
 120
 121
 122 <hr />
 123
 124 <p><b>Input field with a trigger image.</b> Note that the Calendar.setup
 125 function doesn't care if the trigger is a button, image, or anything else.
 126 Also in this example we setup a different alignment, just to show how it's
 127 done.  The input field is read-only (that is set from HTML).</p>
 128
 129 <form action="#" method="get">
 130 <table cellspacing="0" cellpadding="0" style="border-collapse: collapse"><tr>
 131  <td><input type="text" name="date" id="f_date_c" readonly="1" /></td>
 132  <td><img src="img.gif" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Date selector"
 133       onmouseover="this.style.background='red';" onmouseout="this.style.background=''" /></td>
 134 </table>
 135 </form>
 136
 137 <script type="text/javascript">
 138     Calendar.setup({
 139         inputField     :    "f_date_c",     // id of the input field
 140         ifFormat       :    "%B %e, %Y",      // format of the input field
 141         button         :    "f_trigger_c",  // trigger for the calendar (button ID)
 142         align          :    "Tl",           // alignment (defaults to "Bl")
 143         singleClick    :    true
 144     });
 145 </script>
 146
 147
 148
 149 <hr />
 150
 151 <p><b>Hidden field, display area.</b> The calendar now puts the date into 2
 152 elements: one is an input field of type "hidden"&mdash;so that the user
 153 can't directly see or modify it&mdash; and one is a &lt;span&gt; element in
 154 which the date is displayed.  Note that if the trigger is not specified the
 155 calendar will use the displayArea (or inputField as in the first example).
 156 The display area can have it's own format.  This is useful if, for instance,
 157 we need to store one format in the database (thus pass it in the input
 158 field) but we wanna show a friendlier format to the end-user.</p>
 159
 160 <form action="#" method="get" style="visibility: hidden">
 161 <input type="hidden" name="date" id="f_date_d" />
 162 </form>
 163
 164 <p>Your birthday:
 165    <span style="background-color: #ff8; cursor: default;"
 166          onmouseover="this.style.backgroundColor='#ff0';"
 167          onmouseout="this.style.backgroundColor='#ff8';"
 168          id="show_d"
 169    >Click to open date selector</span>.</p>
 170
 171 <script type="text/javascript">
 172     Calendar.setup({
 173         inputField     :    "f_date_d",     // id of the input field
 174         ifFormat       :    "%Y/%d/%m",     // format of the input field (even if hidden, this format will be honored)
 175         displayArea    :    "show_d",       // ID of the span where the date is to be shown
 176         daFormat       :    "%A, %B %d, %Y",// format of the displayed date
 177         align          :    "Tl",           // alignment (defaults to "Bl")
 178         singleClick    :    true
 179     });
 180 </script>
 181
 182
 183
 184 <hr />
 185
 186 <p><b>Hidden field, display area, trigger image.</b> Very similar to the
 187 previous example.  The difference is that we also have a trigger image.</p>
 188
 189 <form action="#" method="get" style="visibility: hidden">
 190 <input type="hidden" name="date" id="f_date_e" />
 191 </form>
 192
 193 <p>Your birthday: <span id="show_e">-- not entered --</span> <img
 194 src="img.gif" id="f_trigger_e" style="cursor: pointer; border: 1px solid
 195 red;" title="Date selector" onmouseover="this.style.background='red';"
 196 onmouseout="this.style.background=''" />.</p>
 197
 198 <script type="text/javascript">
 199     Calendar.setup({
 200         inputField     :    "f_date_e",     // id of the input field
 201         ifFormat       :    "%Y/%d/%m",     // format of the input field (even if hidden, this format will be honored)
 202         displayArea    :    "show_e",       // ID of the span where the date is to be shown
 203         daFormat       :    "%A, %B %d, %Y",// format of the displayed date
 204         button         :    "f_trigger_e",  // trigger button (well, IMG in our case)
 205         align          :    "Tl",           // alignment (defaults to "Bl")
 206         singleClick    :    true
 207     });
 208 </script>
 209
 210
 211
 212 <hr />
 213
 214 <p><b>Hidden field, display area.</b> Very much like the previous examples,
 215 but we now disable some dates (all weekends, that is, Saturdays and
 216 Sundays).</p>
 217
 218 <form action="#" method="get" style="visibility: hidden">
 219 <input type="hidden" name="date" id="f_date_f" />
 220 </form>
 221
 222 <p>Your birthday:
 223    <span style="background-color: #ff8; cursor: default;"
 224          onmouseover="this.style.backgroundColor='#ff0';"
 225          onmouseout="this.style.backgroundColor='#ff8';"
 226          id="show_f"
 227    >Click to open date selector</span>.</p>
 228
 229 <script type="text/javascript">
 230     Calendar.setup({
 231         inputField     :    "f_date_f",     // id of the input field
 232         ifFormat       :    "%Y/%d/%m",     // format of the input field (even if hidden, this format will be honored)
 233         displayArea    :    "show_f",       // ID of the span where the date is to be shown
 234         daFormat       :    "%A, %B %d, %Y",// format of the displayed date
 235         align          :    "Tl",           // alignment (defaults to "Bl")
 236         dateStatusFunc :    function (date) { // disable weekend days (Saturdays == 6 and Subdays == 0)
 237                               return (date.getDay() == 6 || date.getDay() == 0) ? true : false;
 238                             }
 239     });
 240 </script>
 241
 242
 243 </body>
 244 </html>