calendar.html 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <html>
  2. <head>
  3. <title>Date Picker</title>
  4. <link href="css/calendar.css" type="text/css" rel="stylesheet">
  5. <script language="javascript">
  6. // months as they appear in the calendar's title
  7. var ARR_MONTHS = ["January", "February", "March", "April", "May", "June",
  8. "July", "August", "September", "October", "November", "December"];
  9. // week day titles as they appear on the calendar
  10. var ARR_WEEKDAYS = ["S", "M", "T", "W", "T", "F", "S"];
  11. // day week starts from (normally 0-Su or 1-Mo)
  12. var NUM_WEEKSTART = 1;
  13. // path to the directory where calendar images are stored. trailing slash req.
  14. //var STR_ICONPATH = '/images/';
  15. var STR_ICONPATH = 'images/';
  16. var re_url = new RegExp('datetime=(\\-?\\d+)');
  17. var dt_current = (re_url.exec(String(window.location))
  18. ? new Date(new Number(RegExp.$1)) : new Date());
  19. var re_id = new RegExp('id=(\\d+)');
  20. var num_id = (re_id.exec(String(window.location))
  21. ? new Number(RegExp.$1) : 0);
  22. var obj_caller = (window.opener ? window.opener.calendars[num_id] : null);
  23. if (obj_caller && obj_caller.year_scroll) {
  24. // get same date in the previous year
  25. var dt_prev_year = new Date(dt_current);
  26. dt_prev_year.setFullYear(dt_prev_year.getFullYear() - 1);
  27. if (dt_prev_year.getDate() != dt_current.getDate())
  28. dt_prev_year.setDate(0);
  29. // get same date in the next year
  30. var dt_next_year = new Date(dt_current);
  31. dt_next_year.setFullYear(dt_next_year.getFullYear() + 1);
  32. if (dt_next_year.getDate() != dt_current.getDate())
  33. dt_next_year.setDate(0);
  34. }
  35. // get same date in the previous month
  36. var dt_prev_month = new Date(dt_current);
  37. dt_prev_month.setMonth(dt_prev_month.getMonth() - 1);
  38. if (dt_prev_month.getDate() != dt_current.getDate())
  39. dt_prev_month.setDate(0);
  40. // get same date in the next month
  41. var dt_next_month = new Date(dt_current);
  42. dt_next_month.setMonth(dt_next_month.getMonth() + 1);
  43. if (dt_next_month.getDate() != dt_current.getDate())
  44. dt_next_month.setDate(0);
  45. // get first day to display in the grid for current month
  46. var dt_firstday = new Date(dt_current);
  47. dt_firstday.setDate(1);
  48. dt_firstday.setDate(1 - (7 + dt_firstday.getDay() - NUM_WEEKSTART) % 7);
  49. // function passing selected date to calling window
  50. function set_datetime(n_datetime, b_close) {
  51. if (!obj_caller) return;
  52. var dt_datetime = obj_caller.prs_time(
  53. (document.cal ? document.cal.time.value : ''),
  54. new Date(n_datetime)
  55. );
  56. if (!dt_datetime) return;
  57. if (b_close) {
  58. window.close();
  59. obj_caller.target.value = (document.cal
  60. ? obj_caller.gen_tsmp(dt_datetime)
  61. : obj_caller.gen_date(dt_datetime)
  62. );
  63. }
  64. else obj_caller.popup(dt_datetime.valueOf());
  65. }
  66. </script>
  67. </head>
  68. <body marginheight="5" marginwidth="5" topmargin="5" leftmargin="5" rightmargin="5">
  69. <table cellspacing="0" border="0" width="100%">
  70. <tr>
  71. <td class="calendar">
  72. <table cellspacing="1" cellpadding="3" border="0" width="100%">
  73. <tr>
  74. <td colspan="7">
  75. <table cellspacing="0" cellpadding="0" border="0" width="100%">
  76. <tr class="calendar">
  77. <script language="javascript">
  78. document.write(
  79. '<td>'+(obj_caller&&obj_caller.year_scroll?'<a href="javascript:set_datetime('+dt_prev_year.valueOf()+')"><img src="'+STR_ICONPATH+'start.gif" border="0" alt="previous year"></a>&nbsp;':'')+'<a href="javascript:set_datetime('+dt_prev_month.valueOf()+')"><img src="'+STR_ICONPATH+'prev.gif" border="0" alt="previous month"></a></td>'+
  80. '<td align="center" width="100%"><font color="#000000">'+ARR_MONTHS[dt_current.getMonth()]+' '+dt_current.getFullYear() + '</font></td>'+
  81. '<td><a href="javascript:set_datetime('+dt_next_month.valueOf()+')"><img src="'+STR_ICONPATH+'next.gif" border="0" alt="next month"></a>'+(obj_caller && obj_caller.year_scroll?'&nbsp;<a href="javascript:set_datetime('+dt_next_year.valueOf()+')"><img src="'+STR_ICONPATH+'end.gif" border="0" alt="next year"></a>':'')+'</td>'
  82. );
  83. </script>
  84. </tr>
  85. </table>
  86. </td>
  87. </tr>
  88. <tr>
  89. <script language="javascript">
  90. // print weekdays titles
  91. for (var n=0; n<7; n++)
  92. document.write('<td bgcolor="#3971B5" align="center"><font color="#ffffff">'+ARR_WEEKDAYS[(NUM_WEEKSTART+n)%7]+'</font></td>');
  93. document.write('</tr>');
  94. // print calendar table
  95. var dt_current_day = new Date(dt_firstday),
  96. dt_selected = obj_caller.dt_selected;
  97. while (dt_current_day.getMonth() == dt_current.getMonth() ||
  98. dt_current_day.getMonth() == dt_firstday.getMonth()) {
  99. // print row heder
  100. document.write('<tr>');
  101. for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
  102. if (dt_current_day.getDate() == dt_selected.getDate() &&
  103. dt_current_day.getMonth() == dt_selected.getMonth() &&
  104. dt_current_day.getFullYear() == dt_selected.getFullYear())
  105. // print current date
  106. document.write('<td bgcolor="#ffb6c1" align="center" width="14%">');
  107. else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
  108. // weekend days
  109. document.write('<td bgcolor="#dbeaf5" align="center" width="14%">');
  110. else
  111. // print working days of current month
  112. document.write('<td bgcolor="#ffffff" align="center" width="14%">');
  113. document.write('<a href="javascript:set_datetime('+dt_current_day.valueOf() +', true);">');
  114. if (dt_current_day.getMonth() == this.dt_current.getMonth()) {
  115. // print days of current month
  116. var today = new Date();
  117. if (dt_current_day.getDate() == today.getDate() &&
  118. dt_current_day.getMonth() == today.getMonth() &&
  119. dt_current_day.getFullYear() == today.getFullYear()) {
  120. document.write('<font color="#000F00"><b>');
  121. document.write(dt_current_day.getDate()+'</b></font></a></td>');
  122. } else {
  123. document.write('<font color="#0000FF">');
  124. document.write(dt_current_day.getDate()+'</font></a></td>');
  125. }
  126. } else {
  127. // print days of other months
  128. document.write('<font color="#A0A0A0">');
  129. document.write(dt_current_day.getDate()+'</font></a></td>');
  130. }
  131. dt_current_day.setDate(dt_current_day.getDate()+1);
  132. }
  133. // print row footer
  134. document.write('</tr>');
  135. }
  136. if (obj_caller && obj_caller.time_comp)
  137. document.write('<form onsubmit="javascript:set_datetime('+dt_current.valueOf()+', true)" name="cal"><tr><td colspan="7" bgcolor="#87CEFA"><font color="White" face="tahoma, verdana" size="2">Time: <input type="text" name="time" value="'+obj_caller.gen_time(this.dt_current)+'" size="8" maxlength="8"></font></td></tr></form>');
  138. </script>
  139. </tr>
  140. </table>
  141. </td>
  142. </tr>
  143. </table>
  144. </body>
  145. </html>