JavaScript 周历

• 下载源代码文件 - 186 Kb

引言

此脚本生成的日历可以用作日期选择器，也可以用于在所选月份中选择每周的日期范围。此脚本仅在 Windows 2003 Server 上的 Internet Explorer 6.0、Firefox 1.0.7 和 Opera 8.51 上进行了测试。

用法

使用此日历，您可以选择每周的起始日，默认值为星期一。日历的布局可以通过 CSS 进行自定义。要使用它，您必须将以下 HTML 代码插入到页面的 head 部分。

// insert this code in the head section
// use this css to modify the calendar layout
<LINK REL=StyleSheet HREF="calendar.css" TYPE="text/css">
// include the calendar javascript
<SCRIPT LANGUAGE="JavaScript" 
         SRC="weeklycalendar.js"></SCRIPT>
<script language="javascript">
    // call the function to build the calendar
    // function's param specify the first day of week 
    // 0=Sunday, 1 = Monday, ..., 6=Saturday
    buildWeeklyCalendar(1);
</script>

如果一周的第一天是星期一，则“周”列包含周数，否则显示“<”符号。

日历动态添加到 HTML 页面中，并包含在一个 div 元素中。要显示日历，需要调用 w_displayCalendar 函数。此函数接受两个输入参数；它们必须是脚本用来返回值的现有 元素 ID。

//
// display calendar
//
function w_displayCalendar(linkedId1, linkedId2) 
{
    w_linkedInputText_1 = linkedId1;
    w_linkedInputText_2 = linkedId2;
    
    w_renderCalendar(0);
    if(navigator.userAgent.indexOf("MSIE") != -1) 
    {
        weeklyCalendar.style.left=
          window.event.x+document.body.scrollLeft;
        weeklyCalendar.style.top=
          window.event.y+document.body.scrollTop;
    } 
    else if ((navigator.appName.indexOf("Netscape") != -1) || 
             (navigator.appName.indexOf("Opera") != -1))
    {
        document.getElementById('weeklyCalendar').style.left=gx + 5;
        document.getElementById('weeklyCalendar').style.top=gy + 5;
    }
    document.getElementById('weeklyCalendar').style.visibility = "visible";
}

将日历用作日期选择器时，它会自动填充一个输入文本元素，并将它的 ID 作为 w_displayCalendar 函数的参数传递。

<tr>
   <td style="height: 78px">Date picker</td><td style="height: 78px">
      <!--  this is the datepicker input text -->    
      <input type="text"  name="DatePicker" id="DatePicker" size="35" maxlength="80">
      <!--  attach the w_displayCalendar function to the onClick event -->
      <input type="button" value="..." 
         onClick="w_displayCalendar('DatePicker',null);">
   </td>
</tr>

将日历用作每周范围选择器时，单击周数或“<”符号，它会自动填充两个输入文本框。

<tr>
    <td style="height: 131px">Weekly Range Selector</td>
      <!--  this is start range input text -->    
      <td style="height: 131px">Start day:<input type="text" 
         name="WeeklyDateStart" id="WeeklyDateStart" 
         size="35" maxlength="80"><br />
      <!--  this is end range input text -->
      End day: <input type="text"  name="WeeklyDateEnd" 
         id="WeeklyDateEnd" size="35" maxlength="80">
      <!--  attach the w_displayCalendar function to the onClick event -->
      <input type="button" value="..." 
        onClick="w_displayCalendar('WeeklyDateStart','WeeklyDateEnd');">
   </td>
</tr>

新功能

现在您可以使用新的函数 w_displayDatePicker 将日历用作简单的日期选择器。此函数显示日历，并使用新的 CSS 类自动隐藏“周”列。

<tr>
   <td style="height: 78px">Date picker</td>
   <td style="height: 78px">
      <!--  this is the datepicker input text -->
      <input type="text"  name="DatePicker" 
             id="DatePicker" size="35" maxlength="80">
      <!--  attach the w_displayCalendar function to the onClick event -->
      <input type="button" value="..."
         onClick="w_displayDatePicker('DatePicker');">
   </td>
</tr>

结论

Zip 源代码文件包含每周日历脚本、CSS 和两个演示 HTML 页面。

希望您喜欢这篇文章。