1 | // Title: Timestamp picker |
---|
2 | // Description: See the demo at url |
---|
3 | // URL: http://us.geocities.com/tspicker/ |
---|
4 | // Script featured on: http://javascriptkit.com/script/script2/timestamp.shtml |
---|
5 | // Version: 1.0 |
---|
6 | // Date: 12-05-2001 (mm-dd-yyyy) |
---|
7 | // Author: Denis Gritcyuk <denis@softcomplex.com>; <tspicker@yahoo.com> |
---|
8 | // Notes: Permission given to use this script in any kind of applications if |
---|
9 | // header lines are left unchanged. Feel free to contact the author |
---|
10 | // for feature requests and/or donations |
---|
11 | // |
---|
12 | // Additional changes for Toga by Ramon Bastiaans: |
---|
13 | // - Time validation |
---|
14 | // - Setup of str_target on load of calendar (if it's empty) |
---|
15 | // - Commit new time when changed (not just when date is clicked) |
---|
16 | |
---|
17 | function show_calendar(str_target, str_datetime) { |
---|
18 | var arr_months = ["January", "February", "March", "April", "May", "June", |
---|
19 | "July", "August", "September", "October", "November", "December"]; |
---|
20 | var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]; |
---|
21 | var n_weekstart = 1; // day week starts from (normally 0 or 1) |
---|
22 | |
---|
23 | var dt_datetime = (str_datetime == null || str_datetime =="" ? new Date() : str2dt(str_datetime)); |
---|
24 | var dt_prev_month = new Date(dt_datetime); |
---|
25 | dt_prev_month.setMonth(dt_datetime.getMonth()-1); |
---|
26 | var dt_next_month = new Date(dt_datetime); |
---|
27 | dt_next_month.setMonth(dt_datetime.getMonth()+1); |
---|
28 | var dt_firstday = new Date(dt_datetime); |
---|
29 | dt_firstday.setDate(1); |
---|
30 | dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7); |
---|
31 | var dt_lastday = new Date(dt_next_month); |
---|
32 | dt_lastday.setDate(0); |
---|
33 | |
---|
34 | // html generation (feel free to tune it for your particular application) |
---|
35 | // print calendar header |
---|
36 | var str_buffer = new String ( |
---|
37 | "<html>\n"+ |
---|
38 | "<head>\n"+ |
---|
39 | " <title>Calendar</title>\n"+ |
---|
40 | "</head>\n"+ |
---|
41 | "<SCRIPT LANGUAGE=\"javascript\" SRC=\"ts_validatetime.js\"></SCRIPT>\n"+ |
---|
42 | "<body bgcolor=\"White\" onLoad=\"validateTime( '"+str_target+ "', '"+str_datetime+"' ); if( window.opener."+str_target+ ".value == '' ) window.opener."+str_target+ ".value='"+dt2dtstr( dt_datetime )+" '+document.cal.time.value;\" onUnload=\"validateTime( '"+str_target+ "', '"+str_datetime+"' ); if( window.opener."+str_target+ ".value == '' ) window.opener."+str_target+ ".value='"+dt2dtstr( dt_datetime )+"'+document.cal.time.value;\">\n"+ |
---|
43 | "<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+ |
---|
44 | "<tr><td bgcolor=\"#4682B4\">\n"+ |
---|
45 | "<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+ |
---|
46 | "<tr>\n <td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+ |
---|
47 | str_target+"', '"+ dt2dtstr(dt_prev_month)+"'+document.cal.time.value);\">"+ |
---|
48 | "<img src=\"prev.gif\" width=\"16\" height=\"16\" border=\"0\""+ |
---|
49 | " alt=\"previous month\"></a></td>\n"+ |
---|
50 | " <td bgcolor=\"#4682B4\" colspan=\"5\">"+ |
---|
51 | "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">" |
---|
52 | +arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+ |
---|
53 | " <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('" |
---|
54 | +str_target+"', '"+dt2dtstr(dt_next_month)+"'+document.cal.time.value);\">"+ |
---|
55 | "<img src=\"next.gif\" width=\"16\" height=\"16\" border=\"0\""+ |
---|
56 | " alt=\"next month\"></a></td>\n</tr>\n" |
---|
57 | ); |
---|
58 | |
---|
59 | var dt_current_day = new Date(dt_firstday); |
---|
60 | // print weekdays titles |
---|
61 | str_buffer += "<tr>\n"; |
---|
62 | for (var n=0; n<7; n++) |
---|
63 | str_buffer += " <td bgcolor=\"#87CEFA\">"+ |
---|
64 | "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+ |
---|
65 | week_days[(n_weekstart+n)%7]+"</font></td>\n"; |
---|
66 | // print calendar table |
---|
67 | str_buffer += "</tr>\n"; |
---|
68 | while (dt_current_day.getMonth() == dt_datetime.getMonth() || |
---|
69 | dt_current_day.getMonth() == dt_firstday.getMonth()) { |
---|
70 | // print row heder |
---|
71 | str_buffer += "<tr>\n"; |
---|
72 | for (var n_current_wday=0; n_current_wday<7; n_current_wday++) { |
---|
73 | if (dt_current_day.getDate() == dt_datetime.getDate() && |
---|
74 | dt_current_day.getMonth() == dt_datetime.getMonth()) |
---|
75 | // print current date |
---|
76 | str_buffer += " <td bgcolor=\"#FFB6C1\" align=\"right\">"; |
---|
77 | else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6) |
---|
78 | // weekend days |
---|
79 | str_buffer += " <td bgcolor=\"#DBEAF5\" align=\"right\">"; |
---|
80 | else |
---|
81 | // print working days of current month |
---|
82 | str_buffer += " <td bgcolor=\"white\" align=\"right\">"; |
---|
83 | |
---|
84 | if (dt_current_day.getMonth() == dt_datetime.getMonth()) |
---|
85 | // print days of current month |
---|
86 | str_buffer += "<a href=\"javascript:window.opener."+str_target+ |
---|
87 | ".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+ |
---|
88 | "<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">"; |
---|
89 | else |
---|
90 | // print days of other months |
---|
91 | str_buffer += "<a href=\"javascript:window.opener."+str_target+ |
---|
92 | ".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+ |
---|
93 | "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">"; |
---|
94 | str_buffer += dt_current_day.getDate()+"</font></a></td>\n"; |
---|
95 | dt_current_day.setDate(dt_current_day.getDate()+1); |
---|
96 | } |
---|
97 | // print row footer |
---|
98 | str_buffer += "</tr>\n"; |
---|
99 | } |
---|
100 | // print calendar footer |
---|
101 | str_buffer += |
---|
102 | "<form name=\"cal\" onsubmit=\"var mf = window.opener."+str_target+".value.split( ' ' );window.opener."+str_target+".value=mf[0]+' '+document.cal.time.value; window.close();\">\n<tr><td colspan=\"7\" bgcolor=\"#87CEFA\">"+ |
---|
103 | "<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+ |
---|
104 | "Time: <input type=\"text\" name=\"time\" value=\""+dt2tmstr(dt_datetime)+ |
---|
105 | "\" size=\"8\" maxlength=\"8\" onChange=\"validateTime('"+str_target+"', '"+str_datetime+"');\"></font></td></tr>\n</form>\n" + |
---|
106 | "</table>\n" + |
---|
107 | "</tr>\n</td>\n</table>\n" + |
---|
108 | "</body>\n" + |
---|
109 | "</html>\n"; |
---|
110 | |
---|
111 | var vWinCal = window.open("", "Calendar", |
---|
112 | "width=200,height=250,status=no,resizable=yes,top=200,left=200"); |
---|
113 | vWinCal.opener = self; |
---|
114 | var calc_doc = vWinCal.document; |
---|
115 | calc_doc.write (str_buffer); |
---|
116 | calc_doc.close(); |
---|
117 | } |
---|
118 | // datetime parsing and formatting routimes. modify them if you wish other datetime format |
---|
119 | function str2dt (str_datetime) { |
---|
120 | var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/; |
---|
121 | if (!re_date.exec(str_datetime)) |
---|
122 | return alert("Invalid Datetime format: "+ str_datetime); |
---|
123 | return (new Date (RegExp.$3, RegExp.$2-1, RegExp.$1, RegExp.$4, RegExp.$5, RegExp.$6)); |
---|
124 | } |
---|
125 | function dt2dtstr (dt_datetime) { |
---|
126 | return (new String ( |
---|
127 | dt_datetime.getDate()+"-"+(dt_datetime.getMonth()+1)+"-"+dt_datetime.getFullYear()+" ")); |
---|
128 | } |
---|
129 | function dt2tmstr (dt_datetime) { |
---|
130 | |
---|
131 | if( dt_datetime.getHours() < 10 ) |
---|
132 | var hours = '0' + dt_datetime.getHours(); |
---|
133 | else |
---|
134 | var hours = dt_datetime.getHours(); |
---|
135 | |
---|
136 | if( dt_datetime.getMinutes() < 10 ) |
---|
137 | var minutes = '0' + dt_datetime.getMinutes(); |
---|
138 | else |
---|
139 | var minutes = dt_datetime.getMinutes(); |
---|
140 | |
---|
141 | if( dt_datetime.getSeconds() < 10 ) |
---|
142 | var seconds = '0' + dt_datetime.getSeconds(); |
---|
143 | else |
---|
144 | var seconds = dt_datetime.getSeconds(); |
---|
145 | |
---|
146 | return (new String ( |
---|
147 | hours+":"+minutes+":"+seconds)); |
---|
148 | } |
---|
149 | |
---|