日历控件推介之:Dynarch.com Calendar

日历是 WEB 开发中经常用到的控件之一,在和日期相关的表单里,我们通常需要提供一个日期选择器,方便用户使用、提高用户体验。本文向您推介的是 Dynarch.com 开发的一个日历控件,她功能十分健全,内置多种皮肤,支持多种语言,同时提供了一个配置程序,使用非常方便。本文发布时版本为 1.0。

日历控件推介之:Dynarch.com Calendar – 示例

第一步:包含相关文件

 
<!-- 日历控件样式,内置了十种样式 -->
<link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
 
<!-- 日历控件主程序 -->
<script type="text/javascript" src="calendar.js"></script>
 
<!-- 日历控件的语言包 -->
<script type="text/javascript" src="lang/calendar-en.js"></script>
 
<!-- 内置的日历控件配置程序,可以让你用几行代码实现控件功能 -->
<script type="text/javascript" src="calendar-setup.js"></script>

第二步:根据你的表单元素设置日历控件

 
<form action="#" method="get">
<input type="text" name="date" id="f_date_b" /><button type="reset" id="f_trigger_b">...</button>
</form>
 
<script type="text/javascript">
	Calendar.setup({
		inputField     :    "f_date_b",      // id of the input field
		ifFormat       :    "%m/%d/%Y %I:%M %p",       // format of the input field
		showsTime      :    true,            // will display a time selector
		button         :    "f_trigger_b",   // trigger for the calendar (button ID)
		singleClick    :    false,           // double-click mode
		step           :    1                // show all years in drop-down boxes (instead of every other year as default)
	});
</script>

内置的配置程序里面提供了丰富的配置参数,能让你实现大多数日历控件功能,具体说明请参考说明文档。

源代码下载地址:
http://prdownloads.sourceforge.net/jscalendar/jscalendar-1.0.zip?download

在线文档:(英文)
http://www.dynarch.com/demos/jscalendar/doc/html/reference.html

《日历控件推介之:Dynarch.com Calendar》有1个想法

  1. 不错,收藏了,在JasperServer(www.jasperforge.org)中看到了这个日历,现在才知道它的下载地址…… sourceforge上面的东西--没错

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>