Web 的下拉日历
4.72/5 (25投票s)
一个 JavaScript 文件，提供了一个易于使用的下拉日历，用于在网页上选择日期
引言
需要在网页上快速、易于使用、自动设置的日期选择器吗？这里有一个符合要求的下拉式日历！您可以 在此处 查看我的日历演示页面。
背景
我花了很长时间寻找一个用于网页的日期选择器。几年前，我发现了datetimepicker.js。这是 TengYong Ng 在 2003 年编写的一个弹出式日期时间选择器（参见网站）。我在多个 Web 应用程序中使用了它，但是，弹出式窗口的问题在于它们可能会丢失。如果用户点击别处，它可能会出现在其他窗口后面，并且在再次点击链接时不会重新出现。在学习一些 Ajax 教程时，我想我是否可以将 datetimepicker 的 JavaScript 生成的 HTML 代码插入到页面元素的 innerHTML 中。因此，我删除了所有窗口相关的代码，并移除了时间输入部分。我添加了自动创建和删除 div 元素的代码，并修改了月份和年份的导航方式。这个下拉式日历就是这样产生的。
在收到一条消息说 FireFox 对此脚本不满意后，我开始寻找什么能让它满意。好吧，经过 12 小时的谷歌搜索、测试、阅读、重新测试，以及一些老派的试错法，它似乎能正常运行于 FireFox 和 Internet Explorer 7。当你想让一个东西跨浏览器工作时，事情会变得多么混乱，这真是令人惊叹。我感觉像是回到了试图让同时运行在 DOS 和 UNIX 上的程序。例如，在 Internet Explorer 中，div 元素被创建并附加到 body，你可以立即从 Cal.elem.offsetHeight 获取高度值，但在 FireFox 中，这个值一直为零。不是'undefined'，而是零（0）。所以我把 div 中的主表包裹在另一个带有 id='calT1' 的表格中。当 div 被附加到 body 时，FireFox 会报告 document.getElementById('calT1').offsetHeight ，并给出正确的高度。我每天 97% 的时间都在 Microsoft OS 环境下编写用于数据记录和报告的 VC++ 代码。有一天我对一个客户说：“哦，我可以把所有这些报告都放到网上，这样你就可以从世界任何地方访问它们了！” 现在我知道为什么大多数 Web 应用都说需要 Internet Explorer Vx 或 Netscape Vxx。你可能会花一辈子的时间来跟上浏览器和脚本的更新。
07/08/03 - 在听说了“Select 控件穿透”的很多信息并收到 Thorium 的一些反馈后，我添加了代码来隐藏那些会被日历部分或完全覆盖的 select 控件。完全被覆盖的控件工作正常，但如果一个 select 控件会被部分覆盖，那么当日历打开时它会消失，当日历关闭时它会重新出现。由于这个问题只发生在 Microsoft Internet Explorer 6 或更低版本中，如果浏览器不是 Internet Explorer 或版本 7 及以上，代码将忽略 select 控件。
08/03/05 - 我收到了我们非美国读者关于更改一周起始日的许多请求。我终于找到时间重新审视这个问题，实际上并没有多少代码就可以实现。在变量声明中，现在有一个名为 WeekStartsOnDay 的 var 。如果你将其设置为零（0），则第一天是 Sunday；如果你将其设置为一（1），则第一天是 Monday。我没有做太多额外的测试，但真的有必要吗？
Using the Code
与任何外部脚本文件一样，我们需要将其包含在我们的页面中。这应该放在 head 部分，像这样
<head>
// .... other head stuff ...
<script type="text/javascript" src="DropCalendar.js"></script>
</head>
要使其工作，您只需要一个带有 name* 或 id 的文本框和一个调用 JavaScript 的超链接。这里我使用了一个图片作为打开日历的超链接。
(*FireFox 及类似浏览器更喜欢 id，而不是 name。)
<body>
<input type="text" id="T2" size="14"><a href="javascript:OpenCal('T2');">
<img border="0" src="cal.gif" width="16" height="16"></a>
</body>
仅此而已。您可以修改脚本文件中的全局变量来更改日历的某些特性。可以更改的内容包括颜色、下拉框的大小、字体大小和默认格式。您还可以通过将其作为第二个参数传递来更改日期显示的格式。默认格式是 mmddyyyy。格式中不要包含任何分隔符，如斜杠“/”。
关注点
除非会超出页面范围，否则日历将始终显示在文本框的左下角。如果它会超出右侧，它会向左滑动；如果它会超出浏览器底部，它将附着在文本框的顶部。
月份和年份的导航是通过日历上的 << < 和 > >> 超链接进行的。
用户可以通过点击右上角的 X 或点击最初打开它的超链接图片来关闭日历。
日历下拉框就像《高地人》一样，只能有一个。如果您点击页面上的第二个链接，而该页面上有多个日历链接，日历将关闭其原始位置并移动到新位置。
该脚本基本上会创建一个由超链接表格组成的 HTML 页面主体，这些超链接会调用函数来导航或选择日期，并通过其 value 成员将选定的日期放入文本框中。当您调用 OpenCal 时，它会在您的页面上创建一个 div 元素，并将 HTML 日历插入其 innerHTML 成员，然后将其附加到 document.body 集合中。
当日历关闭时，div 元素会通过 removeElement 方法从 document.body 中移除。然后 close 函数会删除日历，从而一并销毁 div 元素。