- 浏览: 129332 次
- 性别:
- 来自: 安徽
文章分类
在Web开发中,总会遇到需要用户输入日期的情况。一般都是提供一个text类型的input供用户输入日期。然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性。除此之外,用户输入日期也是一件不爽的事,如果用户可以直接选择日期,这两个问题都解决了。听起来很不错。实际上,很多开发者都是这么做的。
我们可以自己用javascript写一个日期选择控件,然而,想要写的很好、很漂亮却需要花不少时间和精力。jQuery有一个UI插件:datepicher,可以帮我们实现该功能,而且界面很漂亮。下面就学学如何使用它吧。
datepicher插件是jQuery UI的一个插件,它提供一个日期弹出窗口(或直接显示在页面),供用户选择日期。
datepicher插件的使用很简单,语法如下:
其中optional是一个对象,该对象的每一个属性及含义可以参看官方文档:http://jqueryui.com/demos/datepicker/。在此,仅介绍一些常用的属性。
1、datepicher最简单的使用
其中,regDate是页面日期输入框的ID属性值。
就这一句话,在日期输入框获得焦点时,就会弹出一个日期选择窗口。然而,这时候的日期选择窗口有很多不方便的地方,比如:只能一个月一个月的往前或往后,没有关闭按钮等。
2、配置datepicher
通过给datepicher设置一些属性值可以改变默认的显示。如:
这个时候的日期选择就很方便了。可以自由选择年份和月份。
3、增加清除按钮和日期判断功能(增强版datepicher1.7.2)
datepicher1.7.2版本没有提供清除按钮,这让人有点遗憾。(好像之前的版本有提供)。没有清除按钮是很不方便的,特别是输入框获得焦点就弹出日期选择窗口的情况更是如此,因为这时想要清除输入框中的日期比较麻烦。在此推荐一位网友提供的增强版datepicher1.7.2。该增强版datepicher1.7.2不仅实现了清除按钮功能,而且增加了日期大小比较验证,比如:一个日期只能在另一个之后。可以访问该网址查看:http://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html。这时 datepicher的使用已经相当完美:
4、国际化
datepicher提供了国际化的功能。只需将ui.datepicker-zh-CN.js导入页面即可。(或者导入jquery-ui- i18n.js,该文件包含了很多中语言)注意,如果想使用上面提到的增强版datepicher1.7.2,则需要下载作者提供的国际化文件。另外,如果用Eclipse之类的工具编码,注意用eclipse打开国际化文件看看,很有可能显示为乱码。只需要把文件的编码格式改为utf-8,然后用其他编辑工具,如editplus打开国际化文件,拷贝,粘贴覆盖eclipse中的,保存就OK了。
5、国际化为中文可能遇到的显示问题
在使用国际化同时启用changeYear和changeMonth后,两个select显示为两行,很不好看。找了好久,发现在官方提供的jquery-ui-1.7.2.custom.css中,应该作如下几处修改:
6、换肤
jQuery UI预定义了很多皮肤,下载后,只需在页面引入相应皮肤的jquery-ui-1.7.2.custom.css可以实现换肤。如果给用户提供换肤功能,可以通过js控制,实现换肤。
总结:
可以看出,datepicher是一个很好用的插件,比自己写的肯定要好用很多,推荐大家使用。
另外,在使用中,可以定义一个文件,包含该插件的使用,配置好。以后有需要使用的地方,引入该文件,同时传给当前需要使用日期选择控件的id属性,这样便可以只配置一次了。
本文出自:徐新华polaris
我们可以自己用javascript写一个日期选择控件,然而,想要写的很好、很漂亮却需要花不少时间和精力。jQuery有一个UI插件:datepicher,可以帮我们实现该功能,而且界面很漂亮。下面就学学如何使用它吧。
datepicher插件是jQuery UI的一个插件,它提供一个日期弹出窗口(或直接显示在页面),供用户选择日期。
datepicher插件的使用很简单,语法如下:
$("#regDate").datepicher(optional);
其中optional是一个对象,该对象的每一个属性及含义可以参看官方文档:http://jqueryui.com/demos/datepicker/。在此,仅介绍一些常用的属性。
1、datepicher最简单的使用
$("#regDate").datepicher();
其中,regDate是页面日期输入框的ID属性值。
就这一句话,在日期输入框获得焦点时,就会弹出一个日期选择窗口。然而,这时候的日期选择窗口有很多不方便的地方,比如:只能一个月一个月的往前或往后,没有关闭按钮等。
2、配置datepicher
通过给datepicher设置一些属性值可以改变默认的显示。如:
$("#regDate").datepicker( { showMonthAfterYear: true, // 月在年之后显示 changeMonth: true, // 允许选择月份 changeYear: true, // 允许选择年份 dateFormat:'yy-mm-dd', // 设置日期格式 closeText:'关闭', // 只有showButtonPanel: true才会显示出来 duration: 'fast', showAnim:'fadeIn', showOn:'button', // 在输入框旁边显示按钮触发,默认为:focus。还可以设置为both buttonImage: 'images/commons/calendar.gif', // 按钮图标 buttonImageOnly: true, // 不把图标显示在按钮上,即去掉按钮 buttonText:'选择日期', showButtonPanel: true, showOtherMonths: true, //appendText: '(yyyy-mm-dd)', });
这个时候的日期选择就很方便了。可以自由选择年份和月份。
3、增加清除按钮和日期判断功能(增强版datepicher1.7.2)
datepicher1.7.2版本没有提供清除按钮,这让人有点遗憾。(好像之前的版本有提供)。没有清除按钮是很不方便的,特别是输入框获得焦点就弹出日期选择窗口的情况更是如此,因为这时想要清除输入框中的日期比较麻烦。在此推荐一位网友提供的增强版datepicher1.7.2。该增强版datepicher1.7.2不仅实现了清除按钮功能,而且增加了日期大小比较验证,比如:一个日期只能在另一个之后。可以访问该网址查看:http://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html。这时 datepicher的使用已经相当完美:
$(function() { $("#effDate").datepicker( { showMonthAfterYear: true, // 月在年之后显示 changeMonth: true, // 允许选择月份 changeYear: true, // 允许选择年份 dateFormat:'yy-mm-dd', // 设置日期格式 showClearButton: true, //clearText: '清除', closeText:'关闭', // 只有showButtonPanel: true才会显示出来 duration: 'fast', showAnim:'fadeIn', showOn:'button', buttonImage: 'images/commons/calendar.gif', buttonImageOnly: true, buttonText:'选择日期', showButtonPanel: true, showOtherMonths: true, //appendText: '(yyyy-mm-dd)', onSelect: function(dateText, inst) // 使结束时间大于开始时间 { /** * 以下写法在IE中出现问题。 * $('#expDate').datepicker('option', 'minDate', new Date(dateText.replace(/-/g,','))); * 时,在结束(过期时间)选择时,年会没有,而且控制会失效。通过调试,发现new Date(dateText.replace(/-/g,',')) * 返回的结果是NaN。说明Date对象不能这么构造(但是Firefox可以) */ var arys = new Array(); var arys = dateText.split('-'); $('#expDate').datepicker('option', 'minDate', new Date(arys[0],arys[1]-1,arys[2])); } }); $("#expDate").datepicker( { showMonthAfterYear: true, // 月在年之后显示 changeMonth: true, // 允许选择月份 changeYear: true, // 允许选择年份 dateFormat:'yy-mm-dd', // 设置日期格式 showClearButton: true, // 自定义的方法(1.7.2没有清除按钮) //clearText: '清除', // 自定义的文本,在文档在有定义(js中) closeText:'关闭', // 只有showButtonPanel: true才会显示出来 duration: 'fast', showAnim:'fadeIn', showOn:'button', // 在输入框旁边显示按钮触发,默认为:focus。还可以设置为both buttonImage: 'images/commons/calendar.gif', // 按钮图标 buttonImageOnly: true, // 不把图标显示在按钮上,即去掉按钮 buttonText:'选择日期', showButtonPanel: true, showOtherMonths: true, //appendText: '(yyyy-mm-dd)', onSelect: function(dateText, inst) { var arys = new Array(); var arys = dateText.split('-'); $('#effDate').datepicker('option','maxDate',new Date(arys[0],arys[1]-1,arys[2])); } }); });
4、国际化
datepicher提供了国际化的功能。只需将ui.datepicker-zh-CN.js导入页面即可。(或者导入jquery-ui- i18n.js,该文件包含了很多中语言)注意,如果想使用上面提到的增强版datepicher1.7.2,则需要下载作者提供的国际化文件。另外,如果用Eclipse之类的工具编码,注意用eclipse打开国际化文件看看,很有可能显示为乱码。只需要把文件的编码格式改为utf-8,然后用其他编辑工具,如editplus打开国际化文件,拷贝,粘贴覆盖eclipse中的,保存就OK了。
5、国际化为中文可能遇到的显示问题
在使用国际化同时启用changeYear和changeMonth后,两个select显示为两行,很不好看。找了好久,发现在官方提供的jquery-ui-1.7.2.custom.css中,应该作如下几处修改:
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; } .ui-datepicker select.ui-datepicker-month-year { 100%;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { 49%;} .ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }应该改为:
.ui-datepicker .ui-datepicker-title select {font-size:1em; margin:1px 0; } .ui-datepicker select.ui-datepicker-month-year { 100%;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { 47%;} .ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: left; }就OK了
6、换肤
jQuery UI预定义了很多皮肤,下载后,只需在页面引入相应皮肤的jquery-ui-1.7.2.custom.css可以实现换肤。如果给用户提供换肤功能,可以通过js控制,实现换肤。
总结:
可以看出,datepicher是一个很好用的插件,比自己写的肯定要好用很多,推荐大家使用。
另外,在使用中,可以定义一个文件,包含该插件的使用,配置好。以后有需要使用的地方,引入该文件,同时传给当前需要使用日期选择控件的id属性,这样便可以只配置一次了。
本文出自:徐新华polaris
- js.zip (78.8 KB)
- 下载次数: 82
发表评论
-
JS强制换行
2013-04-18 15:38 1253$(function() { $(".wor ... -
jquery 限制文本框只能输入数字
2012-09-19 11:22 1234原文引自:http://lvhjean.blog.163.co ... -
Window.ShowModalDialog使用手册
2012-08-08 14:13 1149原文引自:http://www.cnblogs.com/ ... -
form序列化成json串
2012-07-18 21:18 1230;(function($){ /** * 依赖jq ... -
JS 四舍五入
2012-07-18 15:25 834原文引自:http://www.cnblogs.com/zon ... -
客户端用javascript来画图
2012-07-13 14:17 1415序:在 www.sitepoint.com ... -
My97DatePicker使用
2011-07-14 20:23 1577My97DatePicker IE6下遇到的问题: In ... -
jQuery性能优化
2011-07-01 13:33 1021本文摘自:开源中国社 ... -
Center an element on the screen
2011-06-23 17:22 681$(document).ready(function() { ... -
用jQuery实现的一个分页工具栏
2011-06-02 14:42 1319先看下效果图: 这是第一次写博文,是关于学习jQuery完 ... -
JavaScript中对象的构造方法
2011-05-31 13:13 775第一种方式: 工厂方法 ... -
分享9个实用的jQuery倒计时插件
2011-05-23 13:05 1013jQuery在现在的Web开发项目中扮演着重要角色,jQu ... -
jquery获取父窗口的元素
2011-05-19 13:18 2406$("#父窗口元素ID",window ... -
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2011-05-18 18:05 1528因为浏览器的兼容问题,如果使用javascript获取这些数值 ... -
流行的jQuery信息提示插件(jQuery Tooltip Plugin)
2011-05-18 13:10 1325流行的jQuery信息提示插件(jQuery Toolti ... -
JQuery 浮动DIV显示提示信息并自动隐藏
2011-05-18 13:09 2428function showTips( tips, height ... -
为textarea 增加 maxlength 属性
2011-05-07 09:36 935為 textarea 增加 maxlength 屬性 o 如 ... -
正则表达式非法字符验证[1]
2011-05-07 09:30 2633正则表达式用于字符串 ... -
正则表达式非法字符验证[2]
2011-05-07 09:25 3039// 判断输入是否是一个 ... -
js replaceAll
2011-05-07 09:18 1105String.prototype.replaceAll = ...
相关推荐
jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text
jquery datePicker插件jquery datePicker插件jquery datePicker插件jquery datePicker插件
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下。原本是英文版,引入datePicker_CN.js就变成中文的了哦。
datepicker 是 jQuery 日期选择插件。在线演示 标签:jQuery
jquery的日期插件Datepicker,这两天正好研究完了,将研究结果分享下,单独的封装汉化版本,都有注释,好修改也好使用,注意保持images里面图片的名称和路径,red-datepicker.css可以定义日期div的样式,我自己在源...
jquery日期插件-datepicker
jQuery两排弹出日期选择器是一款jquery datepicker日期选择插件,鼠标点击text文本框弹出两排日期选择器代码。
日期选择插件,其实就是在网页中嵌入日期选择的视图,提供给用户手动选择日期的功能。 对于很多js类库都实现了日期选择的功能,例如:jQuey、ExtJS、EdoJS等,...该日期选择插件为仿jquery的实现,插件样式参考jquery。
jQuery多功能日期时间选择器datepicker是一款支持多种日历模式的日期时间选择插件,功能已经十分全面。
。
。
datepicker时间插件,多种选择方式,年月日,时分秒,区间范围,单个以及多个选择
jQuery插件之三:日期选择器DatePicker jQuery插件之三:日期选择器DatePicker jQuery插件之三:日期选择器DatePicker
本文实例讲述了Jquery日期选择datepicker插件用法。分享给大家供大家参考。具体如下: 1、首先将Jquery中的datepicker插件中的相关属性值改成中文的: $.datepicker.regional['zh-CN'] = { clearText: '清除', ...
使用前需要引入文件 文件包括My97DatePicker日期插件,jquery校验插件jquery.validate.min.js,jquery-1.12.4.min.js
Air Datepicker_跨浏览器jQuery日期选择器插件.
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
air-datepicker是一款跨浏览器轻量级的jQuery日期选择器插件。该日期选择器使用es5和css-flexbox来制作,可以在所有的现代浏览器中正常工作。
实用漂亮jQuery网页日历插件datePicker下载