1 |
|
/***********************************************
|
2 |
|
Fool-Proof Date Input Script with DHTML Calendar
|
3 |
|
by Jason Moon - calendar@moonscript.com
|
4 |
|
************************************************/
|
5 |
|
|
6 |
|
// Customizable variables
|
7 |
|
var DefaultDateFormat = 'MM/DD/YYYY'; // If no date format is supplied, this will be used instead
|
8 |
|
var HideWait = 3; // Number of seconds before the calendar will disappear
|
9 |
|
var Y2kPivotPoint = 76; // 2-digit years before this point will be created in the 21st century
|
10 |
|
var UnselectedMonthText = ''; // Text to display in the 1st month list item when the date isn't required
|
11 |
|
var FontSize = 11; // In pixels
|
12 |
|
var FontFamily = 'Tahoma';
|
13 |
|
var CellWidth = 18;
|
14 |
|
var CellHeight = 16;
|
15 |
|
var ImageURL = 'calendar/calendar.jpg';
|
16 |
|
var NextURL = 'calendar/next.gif';
|
17 |
|
var PrevURL = 'calendar/prev.gif';
|
18 |
|
var CalBGColor = 'white';
|
19 |
|
var TopRowBGColor = 'buttonface';
|
20 |
|
var DayBGColor = 'lightgrey';
|
21 |
|
|
22 |
|
// Global variables
|
23 |
|
var ZCounter = 100;
|
24 |
|
var Today = new Date();
|
25 |
|
var WeekDays = new Array('S','M','T','W','T','F','S');
|
26 |
|
var MonthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
|
27 |
|
var MonthNames = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
|
28 |
|
|
29 |
|
// Write out the stylesheet definition for the calendar
|
30 |
|
with (document) {
|
31 |
|
writeln('<style>');
|
32 |
|
writeln('td.calendarDateInput {letter-spacing:normal;line-height:normal;font-family:' + FontFamily + ',Sans-Serif;font-size:' + FontSize + 'px;}');
|
33 |
|
writeln('select.calendarDateInput {letter-spacing:.06em;font-family:Verdana,Sans-Serif;font-size:11px;}');
|
34 |
|
writeln('input.calendarDateInput {letter-spacing:.06em;font-family:Verdana,Sans-Serif;font-size:11px;}');
|
35 |
|
writeln('</style>');
|
36 |
|
}
|
37 |
|
|
38 |
|
// Only allows certain keys to be used in the date field
|
39 |
|
function YearDigitsOnly(e) {
|
40 |
|
var KeyCode = (e.keyCode) ? e.keyCode : e.which;
|
41 |
|
return ((KeyCode == 8) // backspace
|
42 |
|
|| (KeyCode == 9) // tab
|
43 |
|
|| (KeyCode == 37) // left arrow
|
44 |
|
|| (KeyCode == 39) // right arrow
|
45 |
|
|| (KeyCode == 46) // delete
|
46 |
|
|| ((KeyCode > 47) && (KeyCode < 58)) // 0 - 9
|
47 |
|
);
|
48 |
|
}
|
49 |
|
|
50 |
|
// Gets the absolute pixel position of the supplied element
|
51 |
|
function GetTagPixels(StartTag, Direction) {
|
52 |
|
var PixelAmt = (Direction == 'LEFT') ? StartTag.offsetLeft : StartTag.offsetTop;
|
53 |
|
while ((StartTag.tagName != 'BODY') && (StartTag.tagName != 'HTML')) {
|
54 |
|
StartTag = StartTag.offsetParent;
|
55 |
|
PixelAmt += (Direction == 'LEFT') ? StartTag.offsetLeft : StartTag.offsetTop;
|
56 |
|
}
|
57 |
|
return PixelAmt;
|
58 |
|
}
|
59 |
|
|
60 |
|
// Is the specified select-list behind the calendar?
|
61 |
|
function BehindCal(SelectList, CalLeftX, CalRightX, CalTopY, CalBottomY, ListTopY) {
|
62 |
|
var ListLeftX = GetTagPixels(SelectList, 'LEFT');
|
63 |
|
var ListRightX = ListLeftX + SelectList.offsetWidth;
|
64 |
|
var ListBottomY = ListTopY + SelectList.offsetHeight;
|
65 |
|
return (((ListTopY < CalBottomY) && (ListBottomY > CalTopY)) && ((ListLeftX < CalRightX) && (ListRightX > CalLeftX)));
|
66 |
|
}
|
67 |
|
|
68 |
|
// For IE, hides any select-lists that are behind the calendar
|
69 |
|
function FixSelectLists(Over) {
|
70 |
|
if (navigator.appName == 'Microsoft Internet Explorer') {
|
71 |
|
var CalDiv = this.getCalendar();
|
72 |
|
var CalLeftX = CalDiv.offsetLeft;
|
73 |
|
var CalRightX = CalLeftX + CalDiv.offsetWidth;
|
74 |
|
var CalTopY = CalDiv.offsetTop;
|
75 |
|
var CalBottomY = CalTopY + (CellHeight * 9);
|
76 |
|
var FoundCalInput = false;
|
77 |
|
formLoop :
|
78 |
|
for (var j=this.formNumber;j<document.forms.length;j++) {
|
79 |
|
for (var i=0;i<document.forms[j].elements.length;i++) {
|
80 |
|
if (typeof document.forms[j].elements[i].type == 'string') {
|
81 |
|
if ((document.forms[j].elements[i].type == 'hidden') && (document.forms[j].elements[i].name == this.hiddenFieldName)) {
|
82 |
|
FoundCalInput = true;
|
83 |
|
i += 3; // 3 elements between the 1st hidden field and the last year input field
|
84 |
|
}
|
85 |
|
if (FoundCalInput) {
|
86 |
|
if (document.forms[j].elements[i].type.substr(0,6) == 'select') {
|
87 |
|
ListTopY = GetTagPixels(document.forms[j].elements[i], 'TOP');
|
88 |
|
if (ListTopY < CalBottomY) {
|
89 |
|
if (BehindCal(document.forms[j].elements[i], CalLeftX, CalRightX, CalTopY, CalBottomY, ListTopY)) {
|
90 |
|
document.forms[j].elements[i].style.visibility = (Over) ? 'hidden' : 'visible';
|
91 |
|
}
|
92 |
|
}
|
93 |
|
else break formLoop;
|
94 |
|
}
|
95 |
|
}
|
96 |
|
}
|
97 |
|
}
|
98 |
|
}
|
99 |
|
}
|
100 |
|
}
|
101 |
|
|
102 |
|
// Displays a message in the status bar when hovering over the calendar days
|
103 |
|
function DayCellHover(Cell, Over, Color, HoveredDay) {
|
104 |
|
Cell.style.backgroundColor = (Over) ? DayBGColor : Color;
|
105 |
|
if (Over) {
|
106 |
|
if ((this.yearValue == Today.getFullYear()) && (this.monthIndex == Today.getMonth()) && (HoveredDay == Today.getDate())) self.status = 'Click to select today';
|
107 |
|
else {
|
108 |
|
var Suffix = HoveredDay.toString();
|
109 |
|
switch (Suffix.substr(Suffix.length - 1, 1)) {
|
110 |
|
case '1' : Suffix += (HoveredDay == 11) ? 'th' : 'st'; break;
|
111 |
|
case '2' : Suffix += (HoveredDay == 12) ? 'th' : 'nd'; break;
|
112 |
|
case '3' : Suffix += (HoveredDay == 13) ? 'th' : 'rd'; break;
|
113 |
|
default : Suffix += 'th'; break;
|
114 |
|
}
|
115 |
|
self.status = 'Click to select ' + this.monthName + ' ' + Suffix;
|
116 |
|
}
|
117 |
|
}
|
118 |
|
else self.status = '';
|
119 |
|
return true;
|
120 |
|
}
|
121 |
|
|
122 |
|
// Sets the form elements after a day has been picked from the calendar
|
123 |
|
function PickDisplayDay(ClickedDay) {
|
124 |
|
this.show();
|
125 |
|
var MonthList = this.getMonthList();
|
126 |
|
var DayList = this.getDayList();
|
127 |
|
var YearField = this.getYearField();
|
128 |
|
FixDayList(DayList, GetDayCount(this.displayed.yearValue, this.displayed.monthIndex));
|
129 |
|
// Select the month and day in the lists
|
130 |
|
for (var i=0;i<MonthList.length;i++) {
|
131 |
|
if (MonthList.options[i].value == this.displayed.monthIndex) MonthList.options[i].selected = true;
|
132 |
|
}
|
133 |
|
for (var j=1;j<=DayList.length;j++) {
|
134 |
|
if (j == ClickedDay) DayList.options[j-1].selected = true;
|
135 |
|
}
|
136 |
|
this.setPicked(this.displayed.yearValue, this.displayed.monthIndex, ClickedDay);
|
137 |
|
// Change the year, if necessary
|
138 |
|
YearField.value = this.picked.yearPad;
|
139 |
|
YearField.defaultValue = YearField.value;
|
140 |
|
}
|
141 |
|
|
142 |
|
// Builds the HTML for the calendar days
|
143 |
|
function BuildCalendarDays() {
|
144 |
|
var Rows = 5;
|
145 |
|
if (((this.displayed.dayCount == 31) && (this.displayed.firstDay > 4)) || ((this.displayed.dayCount == 30) && (this.displayed.firstDay == 6))) Rows = 6;
|
146 |
|
else if ((this.displayed.dayCount == 28) && (this.displayed.firstDay == 0)) Rows = 4;
|
147 |
|
var HTML = '<table width="' + (CellWidth * 7) + '" cellspacing="0" cellpadding="1" style="cursor:default">';
|
148 |
|
for (var j=0;j<Rows;j++) {
|
149 |
|
HTML += '<tr>';
|
150 |
|
for (var i=1;i<=7;i++) {
|
151 |
|
Day = (j * 7) + (i - this.displayed.firstDay);
|
152 |
|
if ((Day >= 1) && (Day <= this.displayed.dayCount)) {
|
153 |
|
if ((this.displayed.yearValue == this.picked.yearValue) && (this.displayed.monthIndex == this.picked.monthIndex) && (Day == this.picked.day)) {
|
154 |
|
TextStyle = 'color:white;font-weight:bold;'
|
155 |
|
BackColor = DayBGColor;
|
156 |
|
}
|
157 |
|
else {
|
158 |
|
TextStyle = 'color:black;'
|
159 |
|
BackColor = CalBGColor;
|
160 |
|
}
|
161 |
|
if ((this.displayed.yearValue == Today.getFullYear()) && (this.displayed.monthIndex == Today.getMonth()) && (Day == Today.getDate())) TextStyle += 'border:1px solid darkred;padding:0px;';
|
162 |
|
HTML += '<td align="center" class="calendarDateInput" style="cursor:default;height:' + CellHeight + ';width:' + CellWidth + ';' + TextStyle + ';background-color:' + BackColor + '" onClick="' + this.objName + '.pickDay(' + Day + ')" onMouseOver="return ' + this.objName + '.displayed.dayHover(this,true,\'' + BackColor + '\',' + Day + ')" onMouseOut="return ' + this.objName + '.displayed.dayHover(this,false,\'' + BackColor + '\')">' + Day + '</td>';
|
163 |
|
}
|
164 |
|
else HTML += '<td class="calendarDateInput" style="height:' + CellHeight + '"> </td>';
|
165 |
|
}
|
166 |
|
HTML += '</tr>';
|
167 |
|
}
|
168 |
|
return HTML += '</table>';
|
169 |
|
}
|
170 |
|
|
171 |
|
// Determines which century to use (20th or 21st) when dealing with 2-digit years
|
172 |
|
function GetGoodYear(YearDigits) {
|
173 |
|
if (YearDigits.length == 4) return YearDigits;
|
174 |
|
else {
|
175 |
|
var Millennium = (YearDigits < Y2kPivotPoint) ? 2000 : 1900;
|
176 |
|
return Millennium + parseInt(YearDigits,10);
|
177 |
|
}
|
178 |
|
}
|
179 |
|
|
180 |
|
// Returns the number of days in a month (handles leap-years)
|
181 |
|
function GetDayCount(SomeYear, SomeMonth) {
|
182 |
|
return ((SomeMonth == 1) && ((SomeYear % 400 == 0) || ((SomeYear % 4 == 0) && (SomeYear % 100 != 0)))) ? 29 : MonthDays[SomeMonth];
|
183 |
|
}
|
184 |
|
|
185 |
|
// Highlights the buttons
|
186 |
|
function VirtualButton(Cell, ButtonDown) {
|
187 |
|
if (ButtonDown) {
|
188 |
|
Cell.style.borderLeft = 'buttonshadow 1px solid';
|
189 |
|
Cell.style.borderTop = 'buttonshadow 1px solid';
|
190 |
|
Cell.style.borderBottom = 'buttonhighlight 1px solid';
|
191 |
|
Cell.style.borderRight = 'buttonhighlight 1px solid';
|
192 |
|
}
|
193 |
|
else {
|
194 |
|
Cell.style.borderLeft = 'buttonhighlight 1px solid';
|
195 |
|
Cell.style.borderTop = 'buttonhighlight 1px solid';
|
196 |
|
Cell.style.borderBottom = 'buttonshadow 1px solid';
|
197 |
|
Cell.style.borderRight = 'buttonshadow 1px solid';
|
198 |
|
}
|
199 |
|
}
|
200 |
|
|
201 |
|
// Mouse-over for the previous/next month buttons
|
202 |
|
function NeighborHover(Cell, Over, DateObj) {
|
203 |
|
if (Over) {
|
204 |
|
VirtualButton(Cell, false);
|
205 |
|
self.status = 'Click to view ' + DateObj.fullName;
|
206 |
|
}
|
207 |
|
else {
|
208 |
|
Cell.style.border = 'buttonface 1px solid';
|
209 |
|
self.status = '';
|
210 |
|
}
|
211 |
|
return true;
|
212 |
|
}
|
213 |
|
|
214 |
|
// Adds/removes days from the day list, depending on the month/year
|
215 |
|
function FixDayList(DayList, NewDays) {
|
216 |
|
var DayPick = DayList.selectedIndex + 1;
|
217 |
|
if (NewDays != DayList.length) {
|
218 |
|
var OldSize = DayList.length;
|
219 |
|
for (var k=Math.min(NewDays,OldSize);k<Math.max(NewDays,OldSize);k++) {
|
220 |
|
(k >= NewDays) ? DayList.options[NewDays] = null : DayList.options[k] = new Option(k+1, k+1);
|
221 |
|
}
|
222 |
|
DayPick = Math.min(DayPick, NewDays);
|
223 |
|
DayList.options[DayPick-1].selected = true;
|
224 |
|
}
|
225 |
|
return DayPick;
|
226 |
|
}
|
227 |
|
|
228 |
|
// Resets the year to its previous valid value when something invalid is entered
|
229 |
|
function FixYearInput(YearField) {
|
230 |
|
var YearRE = new RegExp('\\d{' + YearField.defaultValue.length + '}');
|
231 |
|
if (!YearRE.test(YearField.value)) YearField.value = YearField.defaultValue;
|
232 |
|
}
|
233 |
|
|
234 |
|
// Displays a message in the status bar when hovering over the calendar icon
|
235 |
|
function CalIconHover(Over) {
|
236 |
|
var Message = (this.isShowing()) ? 'hide' : 'show';
|
237 |
|
self.status = (Over) ? 'Click to ' + Message + ' the calendar' : '';
|
238 |
|
return true;
|
239 |
|
}
|
240 |
|
|
241 |
|
// Starts the timer over from scratch
|
242 |
|
function CalTimerReset() {
|
243 |
|
eval('clearTimeout(' + this.timerID + ')');
|
244 |
|
eval(this.timerID + '=setTimeout(\'' + this.objName + '.show()\',' + (HideWait * 1000) + ')');
|
245 |
|
}
|
246 |
|
|
247 |
|
// The timer for the calendar
|
248 |
|
function DoTimer(CancelTimer) {
|
249 |
|
if (CancelTimer) eval('clearTimeout(' + this.timerID + ')');
|
250 |
|
else {
|
251 |
|
eval(this.timerID + '=null');
|
252 |
|
this.resetTimer();
|
253 |
|
}
|
254 |
|
}
|
255 |
|
|
256 |
|
// Show or hide the calendar
|
257 |
|
function ShowCalendar() {
|
258 |
|
if (this.isShowing()) {
|
259 |
|
var StopTimer = true;
|
260 |
|
this.getCalendar().style.zIndex = --ZCounter;
|
261 |
|
this.getCalendar().style.visibility = 'hidden';
|
262 |
|
this.fixSelects(false);
|
263 |
|
}
|
264 |
|
else {
|
265 |
|
var StopTimer = false;
|
266 |
|
this.fixSelects(true);
|
267 |
|
this.getCalendar().style.zIndex = ++ZCounter;
|
268 |
|
this.getCalendar().style.visibility = 'visible';
|
269 |
|
}
|
270 |
|
this.handleTimer(StopTimer);
|
271 |
|
self.status = '';
|
272 |
|
}
|
273 |
|
|
274 |
|
// Hides the input elements when the "blank" month is selected
|
275 |
|
function SetElementStatus(Hide) {
|
276 |
|
this.getDayList().style.visibility = (Hide) ? 'hidden' : 'visible';
|
277 |
|
this.getYearField().style.visibility = (Hide) ? 'hidden' : 'visible';
|
278 |
|
this.getCalendarLink().style.visibility = (Hide) ? 'hidden' : 'visible';
|
279 |
|
}
|
280 |
|
|
281 |
|
// Sets the date, based on the month selected
|
282 |
|
function CheckMonthChange(MonthList) {
|
283 |
|
var DayList = this.getDayList();
|
284 |
|
if (MonthList.options[MonthList.selectedIndex].value == '') {
|
285 |
|
DayList.selectedIndex = 0;
|
286 |
|
this.hideElements(true);
|
287 |
|
this.setHidden('');
|
288 |
|
}
|
289 |
|
else {
|
290 |
|
this.hideElements(false);
|
291 |
|
if (this.isShowing()) {
|
292 |
|
this.resetTimer(); // Gives the user more time to view the calendar with the newly-selected month
|
293 |
|
this.getCalendar().style.zIndex = ++ZCounter; // Make sure this calendar is on top of any other calendars
|
294 |
|
}
|
295 |
|
var DayPick = FixDayList(DayList, GetDayCount(this.picked.yearValue, MonthList.options[MonthList.selectedIndex].value));
|
296 |
|
this.setPicked(this.picked.yearValue, MonthList.options[MonthList.selectedIndex].value, DayPick);
|
297 |
|
}
|
298 |
|
}
|
299 |
|
|
300 |
|
// Sets the date, based on the day selected
|
301 |
|
function CheckDayChange(DayList) {
|
302 |
|
if (this.isShowing()) this.show();
|
303 |
|
this.setPicked(this.picked.yearValue, this.picked.monthIndex, DayList.selectedIndex+1);
|
304 |
|
}
|
305 |
|
|
306 |
|
// Changes the date when a valid year has been entered
|
307 |
|
function CheckYearInput(YearField) {
|
308 |
|
if ((YearField.value.length == YearField.defaultValue.length) && (YearField.defaultValue != YearField.value)) {
|
309 |
|
if (this.isShowing()) {
|
310 |
|
this.resetTimer(); // Gives the user more time to view the calendar with the newly-entered year
|
311 |
|
this.getCalendar().style.zIndex = ++ZCounter; // Make sure this calendar is on top of any other calendars
|
312 |
|
}
|
313 |
|
var NewYear = GetGoodYear(YearField.value);
|
314 |
|
var MonthList = this.getMonthList();
|
315 |
|
var NewDay = FixDayList(this.getDayList(), GetDayCount(NewYear, this.picked.monthIndex));
|
316 |
|
this.setPicked(NewYear, this.picked.monthIndex, NewDay);
|
317 |
|
YearField.defaultValue = YearField.value;
|
318 |
|
}
|
319 |
|
}
|
320 |
|
|
321 |
|
// Holds characteristics about a date
|
322 |
|
function dateObject() {
|
323 |
|
if (Function.call) { // Used when 'call' method of the Function object is supported
|
324 |
|
var ParentObject = this;
|
325 |
|
var ArgumentStart = 0;
|
326 |
|
}
|
327 |
|
else { // Used with 'call' method of the Function object is NOT supported
|
328 |
|
var ParentObject = arguments[0];
|
329 |
|
var ArgumentStart = 1;
|
330 |
|
}
|
331 |
|
ParentObject.date = (arguments.length == (ArgumentStart+1)) ? new Date(arguments[ArgumentStart+0]) : new Date(arguments[ArgumentStart+0], arguments[ArgumentStart+1], arguments[ArgumentStart+2]);
|
332 |
|
ParentObject.yearValue = ParentObject.date.getFullYear();
|
333 |
|
ParentObject.monthIndex = ParentObject.date.getMonth();
|
334 |
|
ParentObject.monthName = MonthNames[ParentObject.monthIndex];
|
335 |
|
ParentObject.fullName = ParentObject.monthName + ' ' + ParentObject.yearValue;
|
336 |
|
ParentObject.day = ParentObject.date.getDate();
|
337 |
|
ParentObject.dayCount = GetDayCount(ParentObject.yearValue, ParentObject.monthIndex);
|
338 |
|
var FirstDate = new Date(ParentObject.yearValue, ParentObject.monthIndex, 1);
|
339 |
|
ParentObject.firstDay = FirstDate.getDay();
|
340 |
|
}
|
341 |
|
|
342 |
|
// Keeps track of the date that goes into the hidden field
|
343 |
|
function storedMonthObject(DateFormat, DateYear, DateMonth, DateDay) {
|
344 |
|
(Function.call) ? dateObject.call(this, DateYear, DateMonth, DateDay) : dateObject(this, DateYear, DateMonth, DateDay);
|
345 |
|
this.yearPad = this.yearValue.toString();
|
346 |
|
this.monthPad = (this.monthIndex < 9) ? '0' + String(this.monthIndex + 1) : this.monthIndex + 1;
|
347 |
|
this.dayPad = (this.day < 10) ? '0' + this.day.toString() : this.day;
|
348 |
|
this.monthShort = this.monthName.substr(0,3).toUpperCase();
|
349 |
|
// Formats the year with 2 digits instead of 4
|
350 |
|
if (DateFormat.indexOf('YYYY') == -1) this.yearPad = this.yearPad.substr(2);
|
351 |
|
// Define the date-part delimiter
|
352 |
|
if (DateFormat.indexOf('/') >= 0) var Delimiter = '/';
|
353 |
|
else if (DateFormat.indexOf('-') >= 0) var Delimiter = '-';
|
354 |
|
else var Delimiter = '';
|
355 |
|
// Determine the order of the months and days
|
356 |
|
if (/DD?.?((MON)|(MM?M?))/.test(DateFormat)) {
|
357 |
|
this.formatted = this.dayPad + Delimiter;
|
358 |
|
this.formatted += (RegExp.$1.length == 3) ? this.monthShort : this.monthPad;
|
359 |
|
}
|
360 |
|
else if (/((MON)|(MM?M?))?.?DD?/.test(DateFormat)) {
|
361 |
|
this.formatted = (RegExp.$1.length == 3) ? this.monthShort : this.monthPad;
|
362 |
|
this.formatted += Delimiter + this.dayPad;
|
363 |
|
}
|
364 |
|
// Either prepend or append the year to the formatted date
|
365 |
|
this.formatted = (DateFormat.substr(0,2) == 'YY') ? this.yearPad + Delimiter + this.formatted : this.formatted + Delimiter + this.yearPad;
|
366 |
|
}
|
367 |
|
|
368 |
|
// Object for the current displayed month
|
369 |
|
function displayMonthObject(ParentObject, DateYear, DateMonth, DateDay) {
|
370 |
|
(Function.call) ? dateObject.call(this, DateYear, DateMonth, DateDay) : dateObject(this, DateYear, DateMonth, DateDay);
|
371 |
|
this.displayID = ParentObject.hiddenFieldName + '_Current_ID';
|
372 |
|
this.getDisplay = new Function('return document.getElementById(this.displayID)');
|
373 |
|
this.dayHover = DayCellHover;
|
374 |
|
this.goCurrent = new Function(ParentObject.objName + '.getCalendar().style.zIndex=++ZCounter;' + ParentObject.objName + '.setDisplayed(Today.getFullYear(),Today.getMonth());');
|
375 |
|
if (ParentObject.formNumber >= 0) this.getDisplay().innerHTML = this.fullName;
|
376 |
|
}
|
377 |
|
|
378 |
|
// Object for the previous/next buttons
|
379 |
|
function neighborMonthObject(ParentObject, IDText, DateMS) {
|
380 |
|
(Function.call) ? dateObject.call(this, DateMS) : dateObject(this, DateMS);
|
381 |
|
this.buttonID = ParentObject.hiddenFieldName + '_' + IDText + '_ID';
|
382 |
|
this.hover = new Function('C','O','NeighborHover(C,O,this)');
|
383 |
|
this.getButton = new Function('return document.getElementById(this.buttonID)');
|
384 |
|
this.go = new Function(ParentObject.objName + '.getCalendar().style.zIndex=++ZCounter;' + ParentObject.objName + '.setDisplayed(this.yearValue,this.monthIndex);');
|
385 |
|
if (ParentObject.formNumber >= 0) this.getButton().title = this.monthName;
|
386 |
|
}
|
387 |
|
|
388 |
|
// Sets the currently-displayed month object
|
389 |
|
function SetDisplayedMonth(DispYear, DispMonth) {
|
390 |
|
this.displayed = new displayMonthObject(this, DispYear, DispMonth, 1);
|
391 |
|
// Creates the previous and next month objects
|
392 |
|
this.previous = new neighborMonthObject(this, 'Previous', this.displayed.date.getTime() - 86400000);
|
393 |
|
this.next = new neighborMonthObject(this, 'Next', this.displayed.date.getTime() + (86400000 * (this.displayed.dayCount + 1)));
|
394 |
|
// Creates the HTML for the calendar
|
395 |
|
if (this.formNumber >= 0) this.getDayTable().innerHTML = this.buildCalendar();
|
396 |
|
}
|
397 |
|
|
398 |
|
// Sets the current selected date
|
399 |
|
function SetPickedMonth(PickedYear, PickedMonth, PickedDay) {
|
400 |
|
this.picked = new storedMonthObject(this.format, PickedYear, PickedMonth, PickedDay);
|
401 |
|
this.setHidden(this.picked.formatted);
|
402 |
|
this.setDisplayed(PickedYear, PickedMonth);
|
403 |
|
}
|
404 |
|
|
405 |
|
// The calendar object
|
406 |
|
function calendarObject(DateName, DateFormat, DefaultDate) {
|
407 |
|
|
408 |
|
/* Properties */
|
409 |
|
this.hiddenFieldName = DateName;
|
410 |
|
this.monthListID = DateName + '_Month_ID';
|
411 |
|
this.dayListID = DateName + '_Day_ID';
|
412 |
|
this.yearFieldID = DateName + '_Year_ID';
|
413 |
|
this.monthDisplayID = DateName + '_Current_ID';
|
414 |
|
this.calendarID = DateName + '_ID';
|
415 |
|
this.dayTableID = DateName + '_DayTable_ID';
|
416 |
|
this.calendarLinkID = this.calendarID + '_Link';
|
417 |
|
this.timerID = this.calendarID + '_Timer';
|
418 |
|
this.objName = DateName + '_Object';
|
419 |
|
this.format = DateFormat;
|
420 |
|
this.formNumber = -1;
|
421 |
|
this.picked = null;
|
422 |
|
this.displayed = null;
|
423 |
|
this.previous = null;
|
424 |
|
this.next = null;
|
425 |
|
|
426 |
|
/* Methods */
|
427 |
|
this.setPicked = SetPickedMonth;
|
428 |
|
this.setDisplayed = SetDisplayedMonth;
|
429 |
|
this.checkYear = CheckYearInput;
|
430 |
|
this.fixYear = FixYearInput;
|
431 |
|
this.changeMonth = CheckMonthChange;
|
432 |
|
this.changeDay = CheckDayChange;
|
433 |
|
this.resetTimer = CalTimerReset;
|
434 |
|
this.hideElements = SetElementStatus;
|
435 |
|
this.show = ShowCalendar;
|
436 |
|
this.handleTimer = DoTimer;
|
437 |
|
this.iconHover = CalIconHover;
|
438 |
|
this.buildCalendar = BuildCalendarDays;
|
439 |
|
this.pickDay = PickDisplayDay;
|
440 |
|
this.fixSelects = FixSelectLists;
|
441 |
|
this.setHidden = new Function('D','if (this.formNumber >= 0) this.getHiddenField().value=D');
|
442 |
|
// Returns a reference to these elements
|
443 |
|
this.getHiddenField = new Function('return document.forms[this.formNumber].elements[this.hiddenFieldName]');
|
444 |
|
this.getMonthList = new Function('return document.getElementById(this.monthListID)');
|
445 |
|
this.getDayList = new Function('return document.getElementById(this.dayListID)');
|
446 |
|
this.getYearField = new Function('return document.getElementById(this.yearFieldID)');
|
447 |
|
this.getCalendar = new Function('return document.getElementById(this.calendarID)');
|
448 |
|
this.getDayTable = new Function('return document.getElementById(this.dayTableID)');
|
449 |
|
this.getCalendarLink = new Function('return document.getElementById(this.calendarLinkID)');
|
450 |
|
this.getMonthDisplay = new Function('return document.getElementById(this.monthDisplayID)');
|
451 |
|
this.isShowing = new Function('return !(this.getCalendar().style.visibility != \'visible\')');
|
452 |
|
|
453 |
|
/* Constructor */
|
454 |
|
// Functions used only by the constructor
|
455 |
|
function getMonthIndex(MonthAbbr) { // Returns the index (0-11) of the supplied month abbreviation
|
456 |
|
for (var MonPos=0;MonPos<MonthNames.length;MonPos++) {
|
457 |
|
if (MonthNames[MonPos].substr(0,3).toUpperCase() == MonthAbbr.toUpperCase()) break;
|
458 |
|
}
|
459 |
|
return MonPos;
|
460 |
|
}
|
461 |
|
function SetGoodDate(CalObj, Notify) { // Notifies the user about their bad default date, and sets the current system date
|
462 |
|
CalObj.setPicked(Today.getFullYear(), Today.getMonth(), Today.getDate());
|
463 |
|
if (Notify) alert('WARNING: The supplied date is not in valid \'' + DateFormat + '\' format: ' + DefaultDate + '.\nTherefore, the current system date will be used instead: ' + CalObj.picked.formatted);
|
464 |
|
}
|
465 |
|
// Main part of the constructor
|
466 |
|
if (DefaultDate != '') {
|
467 |
|
if ((this.format == 'YYYYMMDD') && (/^(\d{4})(\d{2})(\d{2})$/.test(DefaultDate))) this.setPicked(RegExp.$1, parseInt(RegExp.$2,10)-1, RegExp.$3);
|
468 |
|
else {
|
469 |
|
// Get the year
|
470 |
|
if ((this.format.substr(0,2) == 'YY') && (/^(\d{2,4})(-|\/)/.test(DefaultDate))) { // Year is at the beginning
|
471 |
|
var YearPart = GetGoodYear(RegExp.$1);
|
472 |
|
// Determine the order of the months and days
|
473 |
|
if (/(-|\/)(\w{1,3})(-|\/)(\w{1,3})$/.test(DefaultDate)) {
|
474 |
|
var MidPart = RegExp.$2;
|
475 |
|
var EndPart = RegExp.$4;
|
476 |
|
if (/D$/.test(this.format)) { // Ends with days
|
477 |
|
var DayPart = EndPart;
|
478 |
|
var MonthPart = MidPart;
|
479 |
|
}
|
480 |
|
else {
|
481 |
|
var DayPart = MidPart;
|
482 |
|
var MonthPart = EndPart;
|
483 |
|
}
|
484 |
|
MonthPart = (/\d{1,2}/i.test(MonthPart)) ? parseInt(MonthPart,10)-1 : getMonthIndex(MonthPart);
|
485 |
|
this.setPicked(YearPart, MonthPart, DayPart);
|
486 |
|
}
|
487 |
|
else SetGoodDate(this, true);
|
488 |
|
}
|
489 |
|
else if (/(-|\/)(\d{2,4})$/.test(DefaultDate)) { // Year is at the end
|
490 |
|
var YearPart = GetGoodYear(RegExp.$2);
|
491 |
|
// Determine the order of the months and days
|
492 |
|
if (/^(\w{1,3})(-|\/)(\w{1,3})(-|\/)/.test(DefaultDate)) {
|
493 |
|
if (this.format.substr(0,1) == 'D') { // Starts with days
|
494 |
|
var DayPart = RegExp.$1;
|
495 |
|
var MonthPart = RegExp.$3;
|
496 |
|
}
|
497 |
|
else { // Starts with months
|
498 |
|
var MonthPart = RegExp.$1;
|
499 |
|
var DayPart = RegExp.$3;
|
500 |
|
}
|
501 |
|
MonthPart = (/\d{1,2}/i.test(MonthPart)) ? parseInt(MonthPart,10)-1 : getMonthIndex(MonthPart);
|
502 |
|
this.setPicked(YearPart, MonthPart, DayPart);
|
503 |
|
}
|
504 |
|
else SetGoodDate(this, true);
|
505 |
|
}
|
506 |
|
else SetGoodDate(this, true);
|
507 |
|
}
|
508 |
|
}
|
509 |
|
}
|
510 |
|
|
511 |
|
// Main function that creates the form elements
|
512 |
|
function DateInput(DateName, Required, DateFormat, DefaultDate) {
|
513 |
|
if (arguments.length == 0) document.writeln('<span style="color:red;font-size:' + FontSize + 'px;font-family:' + FontFamily + ';">ERROR: Missing required parameter in call to \'DateInput\': [name of hidden date field].</span>');
|
514 |
|
else {
|
515 |
|
// Handle DateFormat
|
516 |
|
if (arguments.length < 3) { // The format wasn't passed in, so use default
|
517 |
|
DateFormat = DefaultDateFormat;
|
518 |
|
if (arguments.length < 2) Required = false;
|
519 |
|
}
|
520 |
|
else if (/^(Y{2,4}(-|\/)?)?((MON)|(MM?M?)|(DD?))(-|\/)?((MON)|(MM?M?)|(DD?))((-|\/)Y{2,4})?$/i.test(DateFormat)) DateFormat = DateFormat.toUpperCase();
|
521 |
|
else { // Passed-in DateFormat was invalid, use default format instead
|
522 |
|
var AlertMessage = 'WARNING: The supplied date format for the \'' + DateName + '\' field is not valid: ' + DateFormat + '\nTherefore, the default date format will be used instead: ' + DefaultDateFormat;
|
523 |
|
DateFormat = DefaultDateFormat;
|
524 |
|
if (arguments.length == 4) { // DefaultDate was passed in with an invalid date format
|
525 |
|
var CurrentDate = new storedMonthObject(DateFormat, Today.getFullYear(), Today.getMonth(), Today.getDate());
|
526 |
|
AlertMessage += '\n\nThe supplied date (' + DefaultDate + ') cannot be interpreted with the invalid format.\nTherefore, the current system date will be used instead: ' + CurrentDate.formatted;
|
527 |
|
DefaultDate = CurrentDate.formatted;
|
528 |
|
}
|
529 |
|
alert(AlertMessage);
|
530 |
|
}
|
531 |
|
// Define the current date if it wasn't set already
|
532 |
|
if (!CurrentDate) var CurrentDate = new storedMonthObject(DateFormat, Today.getFullYear(), Today.getMonth(), Today.getDate());
|
533 |
|
// Handle DefaultDate
|
534 |
|
if (arguments.length < 4) { // The date wasn't passed in
|
535 |
|
DefaultDate = (Required) ? CurrentDate.formatted : ''; // If required, use today's date
|
536 |
|
}
|
537 |
|
// Creates the calendar object!
|
538 |
|
eval(DateName + '_Object=new calendarObject(\'' + DateName + '\',\'' + DateFormat + '\',\'' + DefaultDate + '\')');
|
539 |
|
// Determine initial viewable state of day, year, and calendar icon
|
540 |
|
if ((Required) || (arguments.length == 4)) {
|
541 |
|
var InitialStatus = '';
|
542 |
|
var InitialDate = eval(DateName + '_Object.picked.formatted');
|
543 |
|
}
|
544 |
|
else {
|
545 |
|
var InitialStatus = ' style="visibility:hidden"';
|
546 |
|
var InitialDate = '';
|
547 |
|
eval(DateName + '_Object.setPicked(' + Today.getFullYear() + ',' + Today.getMonth() + ',' + Today.getDate() + ')');
|
548 |
|
}
|
549 |
|
// Create the form elements
|
550 |
|
with (document) {
|
551 |
|
writeln('<input type="hidden" name="' + DateName + '" value="' + InitialDate + '">');
|
552 |
|
// Find this form number
|
553 |
|
for (var f=0;f<forms.length;f++) {
|
554 |
|
for (var e=0;e<forms[f].elements.length;e++) {
|
555 |
|
if (typeof forms[f].elements[e].type == 'string') {
|
556 |
|
if ((forms[f].elements[e].type == 'hidden') && (forms[f].elements[e].name == DateName)) {
|
557 |
|
eval(DateName + '_Object.formNumber='+f);
|
558 |
|
break;
|
559 |
|
}
|
560 |
|
}
|
561 |
|
}
|
562 |
|
}
|
563 |
|
writeln('<table cellpadding="0" cellspacing="2"><tr>' + String.fromCharCode(13) + '<td valign="middle">');
|
564 |
|
writeln('<select' + InitialStatus + ' class="calendarDateInput" id="' + DateName + '_Day_ID" onChange="' + DateName + '_Object.changeDay(this)">');
|
565 |
|
for (var j=1;j<=eval(DateName + '_Object.picked.dayCount');j++) {
|
566 |
|
DaySelected = ((DefaultDate != '') && (eval(DateName + '_Object.picked.day') == j)) ? ' selected' : '';
|
567 |
|
writeln('<option' + DaySelected + '>' + j + '</option>');
|
568 |
|
}
|
569 |
|
writeln('</select>' + String.fromCharCode(13) + '</td>' + String.fromCharCode(13) + '<td valign="middle">');
|
570 |
|
writeln('<select class="calendarDateInput" id="' + DateName + '_Month_ID" onChange="' + DateName + '_Object.changeMonth(this)">');
|
571 |
|
if (!Required) {
|
572 |
|
var NoneSelected = (DefaultDate == '') ? ' selected' : '';
|
573 |
|
writeln('<option value=""' + NoneSelected + '>' + UnselectedMonthText + '</option>');
|
574 |
|
}
|
575 |
|
for (var i=0;i<12;i++) {
|
576 |
|
MonthSelected = ((DefaultDate != '') && (eval(DateName + '_Object.picked.monthIndex') == i)) ? ' selected' : '';
|
577 |
|
writeln('<option value="' + i + '"' + MonthSelected + '>' + MonthNames[i].substr(0,3) + '</option>');
|
578 |
|
}
|
579 |
|
writeln('</select>' + String.fromCharCode(13) + '</td>' + String.fromCharCode(13) + '<td valign="middle">');
|
580 |
|
writeln('<input' + InitialStatus + ' class="calendarDateInput" type="text" id="' + DateName + '_Year_ID" size="' + eval(DateName + '_Object.picked.yearPad.length') + '" maxlength="' + eval(DateName + '_Object.picked.yearPad.length') + '" title="Year" value="' + eval(DateName + '_Object.picked.yearPad') + '" onKeyPress="return YearDigitsOnly(window.event)" onKeyUp="' + DateName + '_Object.checkYear(this)" onBlur="' + DateName + '_Object.fixYear(this)">');
|
581 |
|
write('<td valign="middle">' + String.fromCharCode(13) + '<a' + InitialStatus + ' id="' + DateName + '_ID_Link" href="javascript:' + DateName + '_Object.show()" onMouseOver="return ' + DateName + '_Object.iconHover(true)" onMouseOut="return ' + DateName + '_Object.iconHover(false)"><img src="' + ImageURL + '" align="baseline" title="Calendar" border="0"></a> ');
|
582 |
|
writeln('<span id="' + DateName + '_ID" style="position:absolute;visibility:hidden;width:' + (CellWidth * 7) + 'px;background-color:' + CalBGColor + ';border:1px solid dimgray;" onMouseOver="' + DateName + '_Object.handleTimer(true)" onMouseOut="' + DateName + '_Object.handleTimer(false)">');
|
583 |
|
writeln('<table width="' + (CellWidth * 7) + '" cellspacing="0" cellpadding="1">' + String.fromCharCode(13) + '<tr style="background-color:' + TopRowBGColor + ';">');
|
584 |
|
writeln('<td id="' + DateName + '_Previous_ID" style="cursor:default" align="center" class="calendarDateInput" style="height:' + CellHeight + '" onClick="' + DateName + '_Object.previous.go()" onMouseDown="VirtualButton(this,true)" onMouseUp="VirtualButton(this,false)" onMouseOver="return ' + DateName + '_Object.previous.hover(this,true)" onMouseOut="return ' + DateName + '_Object.previous.hover(this,false)" title="' + eval(DateName + '_Object.previous.monthName') + '"><img src="' + PrevURL + '"></td>');
|
585 |
|
writeln('<td id="' + DateName + '_Current_ID" style="cursor:pointer" align="center" class="calendarDateInput" style="height:' + CellHeight + '" colspan="5" onClick="' + DateName + '_Object.displayed.goCurrent()" onMouseOver="self.status=\'Click to view ' + CurrentDate.fullName + '\';return true;" onMouseOut="self.status=\'\';return true;" title="Show Current Month">' + eval(DateName + '_Object.displayed.fullName') + '</td>');
|
586 |
|
writeln('<td id="' + DateName + '_Next_ID" style="cursor:default" align="center" class="calendarDateInput" style="height:' + CellHeight + '" onClick="' + DateName + '_Object.next.go()" onMouseDown="VirtualButton(this,true)" onMouseUp="VirtualButton(this,false)" onMouseOver="return ' + DateName + '_Object.next.hover(this,true)" onMouseOut="return ' + DateName + '_Object.next.hover(this,false)" title="' + eval(DateName + '_Object.next.monthName') + '"><img src="' + NextURL + '"></td></tr>' + String.fromCharCode(13) + '<tr>');
|
587 |
|
for (var w=0;w<7;w++) writeln('<td width="' + CellWidth + '" align="center" class="calendarDateInput" style="height:' + CellHeight + ';width:' + CellWidth + ';font-weight:bold;border-top:1px solid dimgray;border-bottom:1px solid dimgray;">' + WeekDays[w] + '</td>');
|
588 |
|
writeln('</tr>' + String.fromCharCode(13) + '</table>' + String.fromCharCode(13) + '<span id="' + DateName + '_DayTable_ID">' + eval(DateName + '_Object.buildCalendar()') + '</span>' + String.fromCharCode(13) + '</span>' + String.fromCharCode(13) + '</td>' + String.fromCharCode(13) + '</tr>' + String.fromCharCode(13) + '</table>');
|
589 |
|
}
|
590 |
|
}
|
591 |
|
}
|
adapted news-module to use the new jscalendar, removed old one