介绍一个jQuery插件Datepicker日期选择器工具,主要用于实现Javascript自定义日期时间选择的功能,以提高用户体验。 Javascript的日期选择器工具很多,jQuery插件Datepicker日期选择器功能强大,同时可自定义日期时间配置,调用非常方 便,Datepicker日期选择器效果图如下:
使用说明
需要使用
jQuery库文件
(目前版本1.3)和
jQuery Datepicker库文件
(目前版本3.5.1)
同时安装jquery.datepick-zh-CN.js支持中文语言包
素材准备
自定义日期选择器CSS样式,控制jQuery插件Datepicker日期选择器显示样式效果,如:datePicker.css
实例代码
一,包含文件部分
1. <script type="text/javascript" src="jquery.js"></script>
2. <script type="text/javascript" src="jquery.datepick.js"></script>
3. <script type="text/javascript" src="jquery.datepick-zh-CN.js"></script>
二,HTML部分
1. <div>jQuery插件datePicker日期选择器 [必优博客] </div>
2. <input type="text" name="time" value="2009-2-9" id="biuuu" />
三,Javascript部分
(调用jQuery插件Datepicker日期选择器)
dateFormat 表示自定义设置日期格式,如:yy-mm-dd
实例可知使用jQuery插件Datepicker日期选择器实现Javascript自定义日期时间选择功能非常简单,一行代码即可实现,如果需要定制 Datepicker日期选择器,可配置jQuery插件Datepicker日期选择器的参数this.regional[''] = {}部分,部分参数如下:
monthNames
表示月份名称,默认英文,如:January
monthNamesShort
表示月份简称,默认英文,如:Jan
dateFormat
表示日期格式,如:yy-mm-dd
firstDay
表示星期的第一天,默认为星期天0
以及控钮设置等,具体可查看jQuery Datepicker的JS库文件,了解Datepicker的配置参数。
1. <script type="text/javascript">
2. <!--
3. $(document).ready(function(){
4. $('#biuuu').datepick({dateFormat: 'yy-mm-dd'});
5. });
6. //-->
7. </script>
jQuery插件Datepicker日期选择器用户使用比较多,主要是由于其功能强大,显示效果美观,调用方便,实现Javascript自定义日期时间选择功能,值得推荐。