1 <html xmlns=
"http://www.w3.org/1999/xhtml" xml:
lang=
"ro" lang=
"ro">
5 <link rel=
"stylesheet" type=
"text/css" media=
"all" href=
"calendar-win2k-1.css" title=
"win2k-1" />
7 <!-- import the calendar script -->
8 <script type=
"text/javascript" src=
"calendar.js"></script>
10 <!-- import the language module -->
11 <script type=
"text/javascript" src=
"lang/calendar-en.js"></script>
13 <!-- helper script that uses the calendar -->
14 <script type=
"text/javascript">
15 // This function gets called when the end-user clicks on some date.
16 function selected(cal, date) {
17 cal.sel.value = date; // just update the date in the input field.
18 if (cal.sel.id ==
"sel1" || cal.sel.id ==
"sel3")
19 // if we add this call we close the calendar on single-click.
20 // just to exemplify both cases, we are using this only for the
1st
21 // and the
3rd field, while
2nd and
4th will still require double-click.
22 cal.callCloseHandler();
25 // And this gets called when the end-user clicks on the _selected_ date,
26 // or clicks on the
"Close" button. It just hides the calendar without
28 function closeHandler(cal) {
29 cal.hide(); // hide the calendar
32 // This function shows the calendar under the element having the given id.
33 // It takes care of catching
"mousedown" signals on document and hiding the
34 // calendar if the click was outside.
35 function showCalendar(id, format) {
36 var el = document.getElementById(id);
37 if (calendar != null) {
38 // we already have some calendar created
39 calendar.hide(); // so we hide it first.
41 // first-time call, create the calendar.
42 var cal = new Calendar(false, null, selected, closeHandler);
43 // uncomment the following line to hide the week numbers
44 // cal.weekNumbers = false;
45 calendar = cal; // remember it in the global var
46 cal.setRange(
1900,
2070); // min/max year allowed.
49 calendar.setDateFormat(format); // set the specified date format
50 calendar.parseDate(el.value); // try to parse the text in field
51 calendar.sel = el; // inform it what input field we use
52 calendar.showAtElement(el); // show the calendar below it
57 var MINUTE =
60 *
1000;
58 var HOUR =
60 * MINUTE;
62 // If this handler returns true then the
"date" given as
63 // parameter will be disabled. In this example we enable
64 // only days within a range of
10 days from the current
66 // You can use the functions date.getFullYear() -- returns the year
67 // as
4 digit number, date.getMonth() -- returns the month as
0.
.11,
68 // and date.getDate() -- returns the date of the month as
1.
.31, to
69 // make heavy calculations here. However, beware that this function
70 // should be very fast, as it is called for each day in a month when
71 // the calendar is (re)constructed.
72 function isDisabled(date) {
73 var today = new Date();
74 return (Math.abs(date.getTime() - today.getTime()) / DAY)
> 10;
83 <input type=
"text" name=
"date1" id=
"sel1" size=
"30">
84 <input type=
"button" value=
"..." onclick=
"return showCalendar('sel1', 'y-m-d');">
87 <br><b>Visible
<select
>, hides and unhides as expected
</b>
89 <select name=
"foo" multiple
>
90 <option value=
"1">can use the functions date.getFullYear() -- returns
</option>
91 <option value=
"2">4 digit number, date.getMonth() -- returns the month
</option>
92 <option value=
"3">heavy calculations here. However, beware that this
</option>
96 <br><b>Hidden
<select
>, it should stay hidden (but doesn't)
</b>
98 <select name=
"foo2" multiple
style=
"visibility: hidden">
99 <option value=
"1">this should
</option>
100 <option value=
"2">remain hidden right?
</option>
104 <br><b>Hidden textbox below, it stays hidden as expected
</b>
106 <input type=
"text" name=
"foo3" value=
"this stays hidden just fine" style=
"visibility: hidden">