22
5

jquery日历选择插件datePicker 简单汉化及应用实例

jquery日历选择插件datePicker:http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/ 最近做的一个项目需要日历选择的插件,又用jquery,于是就找一个jquery的日历选择插件datePicker. 简单介绍一下应用:  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<!--[if IE]><script type="text/javascript" src="js/jquery.bgiframe.min.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery.datePicker.min-2.1.2.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="js/datePicker.css">
<script type="text/javascript">
	$(function()
	{
		$('.date-pick').datePicker({clickInput:true,createButton:false,startDate:'2000-01-01'}).val(new Date().asString()).trigger('change');
	});
</script>
<title>demo</title>
</head>
<body>
起始时间:
<input name="date1" class="date-pick" id="date1" size="10" width="80"/>
结束时间:
<input name="date2" class="date-pick" id="date2" size="10" width="80" />
</body>
</html>

jquery-1.3.2.min.js就不用说了.
date.js是一个日期格式的扩展,需要进行汉化一下.
jquery.bgiframe.min.js也是jquery一个组件.解决 IE6 z-index的问题,可以有可无.
jquery.datePicker.min-2.1.2.js就是今天介绍的日历选择组件了
实例中的用法:
$(‘.date-pick’).datePicker({clickInput:true,createButton:false,startDate:’2000-01-01′}).val(new Date().asString()).trigger(‘change’);
{clickInput:true,createButton:false,startDate:’2000-01-01′}这些是一下参数:
clickInput是点击输入框弹出,日历选择,默认false;
createButton是日历选择的按钮,由于点击输入框弹出,这里没有必要显示这个按钮了.
startDate是可以选择的开始日期,默认是今天.我这里需要选择以前的日期,所以调到2000年了.
跟多的参数请看datePicker官方文档.

至于datePicker的汉化问题,需要改两个文件,data.js还有jquery.datePicker.min-2.1.2.js.其实也简单只是吧英文改成中文就是了,需要注意的是jquery.datePicker.min-2.1.2.js编码需要改成UTF8,用DW可以轻松改改咯.
提供完整实例下载:
jquery.datePicker实例(已经汉化)
更多的例子请看官方网站http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

相关日志

1 条评论了已经

Trackbacks/Pingbacks.

发表评论

名字(必须)
邮箱(必须),(永不被公布)
网址(建议)

字体为 粗体 是必填项目,邮箱地址 永远不会 公布。

允许部分 HTML 代码:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
URLs(网站链接)必须完整有效 (比如: http://www.vpnall.com),所有标签都必须完整的关闭。

超出部分系统将会自动分段及换行。

请保证评论内容是与日志或 Blog 内容相关的,灌水、攻击性或不恰当的评论 可能 会被编辑或删除。