发表时间：2009-02-24
最后修改：2009-03-19
jQuery中的datepick插件，在现在web2.0的应用相当广泛。今天自己特意找了找这方面的资料，结果是非常令人失望。网上的很多实例，都是互相Copy来Copy去的。估计作者在Copy的时候，都没用验证是否能正常运行。因此，自己特意找了下API，写个小笔记式的记录，供大家一起分享和讨论。所设计的东西，都很浅显。有什么不足的，请各位体谅和指正！
首先，你要到http://plugins.jquery.com/project/datepick这个地址出，下载datepick插件包；还有下载一个jQuery.js包。
一般人在做工程的时候，喜欢把JS文件独立放在一个文件夹里，这里我也是如此。把下载的datepick包里的jquery.datepick.js、jquery.datepick-zh-CN.js放到/js的文件夹下；另外，还要把datepick包里的jquery.datepick.css文件，放到/css 文件夹下。如图：
现在编写页面:如下：
<head>
<script type="text/javascript" src="/strutsTest/js/jquery.js"></script>
<script type="text/javascript" src="/strutsTest/js/jquery.validate.js"></script>
<script type="text/javascript" src="/strutsTest/js/jquery.datepick.js"></script>
<script type="text/javascript" src="/strutsTest/js/jquery.datepick-validation.js"></script>
<script type="text/javascript" src="/strutsTest/js/jquery.datepick-zh-CN.js"></script>
<script type="text/javascript">
$(function() {
$('#favDate').datepick();
$('#holidayDates').datepick({rangeSelect: true});
$('#birthDate').datepick({maxDate: new Date()});
/*
$('#validateForm').validate({
errorPlacement: $.datepick.errorPlacement,
rules: {
birthDate: {dpMaxDate: []}
},
messages: {
holidayDates: 'Please enter a valid date range'}
});
*/
});
</script>
<style type="text/css">@import "/strutsTest/css/jquery.datepick.css";</style>
</head>
<body>
<form id="validateForm">
<p>
Favourite date:
<input type="text" id="favDate" name="favDate" size="10"
class="dpDate" />
</p>
<p>
Period of last holiday:
<input type="text" id="holidayDates" name="holidayDates" size="24"
class="dpDate" />
</p>
<p>
Date of birth:
<input type="text" id="birthDate" name="birthDate" size="10" />
</p>
</form>
</body>
其中，strutsTest是我个人的工程名称~
做好这些工作，就可以进行体验了。
加载到Tomcat中，运行，进入页面体验~~
这是我个人的效果图：
说明一点：其中/js/ jquery.datepick-zh-CN.js这个文件，是让弹出的日期选择框支持中文的js文件。只要引入，就可以了！！
