今天看了一下基于 jquery 的 calendar js 控件，效果还不错，而且改变了我对 calendar 控件的恐惧感。
在 jquery 的官方网站上提供了两个 calendar 控件(http://docs.jquery.com/Plugins)，Calendar (Pop-up Calendar)和DateSelector ，分别试用了一下。
先试了一下 DateSelector，这个出现的比较早，会比较成熟一些。
简单的下载了datePicker.js和styles.css (jquery当然也要下载)
写了个测试页面，成功了！非常非常简单好用，没什么依赖。
测试页面内容如下：
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" title="default" media="screen" />
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="datePicker.js"></script>
<script type="text/javascript">
$(document).ready(init);
function init() {
$('input#date1').datePicker();
$('input#date2').datePicker({startDate:'2006-11-02', endDate:'2006-11-13'});
}
</script>
</head>
<body>
<form action="#" method="post">
<div class="demo-holder">
<label for="date1">Date 1</label>
<input type="text" class="date-picker" name="date1" id="date1" />
</div>
<div class="demo-holder">
<label for="date2">Date 2</label>
<input type="text" class="date-picker" name="date2" id="date2" />
</div>
<div style="float: left; margin: 2em 1em 1em;">
<select><option>Select doesn't display through calendar even in IE!</option></select>
</div>
</form>
</body>
</html>
静态页面如图，点击日历图标。
还能挡住 select 框，真是 cool 毕了！
不过，这是讨厌的英文，把那弄成中文吧，^_^
在 init 中加上
$.datePicker.setDateFormat('ymd', '-');
$.datePicker.setLanguageStrings(
['日', '一', '二', '三', '四', '五', '六'],
['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
{p:'上月', n:'下月', c:'关闭', b:'请选择'}
);
一切 ok，顺利变成中文
不过这个控件有个很大的问题，就是不能选择年份，如果这个控件是让人选生日的，那可就麻烦了。
下次再介绍另一个吧，出去吃饭了。
posted on 2007-06-02 11:09
哈哈的日子 阅读(6592)
评论(0) 编辑 收藏 所属分类:
Java