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文件。只要引入，就可以了！！
分享到：
- 2009-02-24 15:52
- 浏览 4175
- 评论(0)
- 论坛回复 / 浏览 (0 / 7974)
- 查看更多
相关推荐
jquery.datepick.rar是一个jquery实现的框架，实现了日历框选择日期的功能，简单实用 jquery-1.3.2.js jquery核心 jquery.datepick.js jquery日历插件 jquery.datepick.css 日历样式 jquery.datepick-zh-CN.js 日历...
jquery.datepick.js
jQuery Datepick 是一个广泛使用的JavaScript库，它为网页中的日期选择提供了一个直观且用户友好的界面。这个插件基于jQuery框架，使得在网页上添加日期选择功能变得轻而易举，无论是简单的日期输入还是复杂的日期...
8. **易用性** - 使用简单，只需要引入 `jquery-1.3.2.js` 和 `jquery.datepick.js` 文件，并通过jQuery选择器调用 `.datepick()` 方法，即可快速启用日期选择功能。 **使用示例：** ```html <!DOCTYPE html> ...
10. **集成和扩展**：datepick可以与其他jQuery插件或库配合使用，如Bootstrap，提供更丰富的用户体验。同时，其源代码是开放的，允许开发者根据需求进行定制和扩展。 总的来说，datepick是一个强大且灵活的日期...
jquery datepicker 的中文包 调用方法 <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-...
如何使用jquery的日期插件 * 引入jquery的js文件 <script type="text/javascript" src="../js/jquery-1.4.2.js"> * 引入日期插件的文件 * 日期插件的js文件 <script type="text/javascript" src="./jquery....
在HTML中，为需要日期选择器的元素添加`id`属性，然后在JavaScript中使用`$(document).ready()`函数来初始化Datepicker： ```html ``` ```javascript $(function() { $("#datepicker").datepicker(); }); ``` ...
功能修改： 1，today以前是跳转到今天日期，不会直接上屏，现改为直接上屏 2，close以前是关闭日历。由于在其他地方点击会自动... 3，增加时分秒功能 4，此版本jquery-ui是1.11.2，可以直接下载此版本对比查看修改处
${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.css" > ${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"> ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"> ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-...
jquery-ui中文日历控件，使用的时候记得先把文档编码改为UTF-8，否则中文显示乱码！
在本案例中，这个日期控件是通过JavaScript和CSS实现的，并且依赖于jQuery库。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互，使得开发者能更高效地编写JavaScript代码。 首先...
在本文中，我们将深入探讨其基本使用方法和一些关键的配置选项。 首先，让我们看看Datepicker的基本引入和初始化过程。在HTML文件中，你需要引入jQuery库、jQuery UI库以及对应的CSS样式表。以下是一个简单的示例：...
然而，直接使用jQuery的`.val()`方法来获取日期控件的值可能会遇到问题，就像描述中提到的那样，返回的结果可能是空或者初始值。 EasyUI的日期控件在页面上表现为一个文本框，同时内部包含了一个隐藏的输入元素，...
为了使用这个日期选择器，你需要在页面中引入jQuery和datepick.js，并确保它们在需要使用日期选择器的脚本之前加载。然后，你可以按照以下步骤配置和使用日期选择器： 1. **引入库**： 在HTML头部添加jQuery和...
看到标签有"datepicker"，我们可以确定这是一个关于网页中使用的日期选择组件，通常用于用户输入日期的交互。"seeing3ds"可能是这个特定实现的一个特性，它可能涉及到网页支付过程中的3D Secure验证，这是一种增强...
文件名`jquery.datepick.package-4.0.3`暗示了这是一个完整的包，可能包含了库本身、文档、示例、以及所有的语言包。 **核心特性：** 1. **多语言支持**：jQuery Datepicker支持多种语言，允许用户根据他们的地理...
例如，在注册或预订表单中，用户可能需要输入出生日期，使用datepick选择日期，然后用formValidator验证其合法性。 - 结合使用这两个插件，可以创建一个更强大、更友好的前端表单系统，既能保证数据质量，又能提高...
在使用前，我们需要引入jQuery库和datepick相关的CSS及JS文件。在HTML中，我们可以创建一个input元素，作为日期选择器的容器： ```html ``` 然后，在JavaScript中初始化Datepick： ```javascript $(document)....