- 浏览: 518065 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (299)
- Oracle(pl/sql_Erp_Pro*C) (69)
- 设计模式 (4)
- spring (23)
- ext (17)
- apache开源项目应用 (4)
- jquery (16)
- 生活琐事 (8)
- 下载资源 (23)
- mysql (2)
- Eclipse使用积累 (5)
- 报表类(报表/图表) (13)
- php (4)
- Web多彩文本框 (3)
- json (4)
- jqgrid (2)
- ant (2)
- java算法积累 (8)
- EL表达式/JSTL (4)
- poi (3)
- gwt (2)
- 爬网第一步 (2)
- javascript (17)
- Javaweb (8)
- tomcat (1)
- flex (1)
- Java&DB (3)
- J2SE (7)
- linux (3)
- 数据结构 (1)
- dot net (5)
- struts (1)
- ibatis (1)
- log4j (1)
- 项目管理 (1)
- Java native interface(jni,jacob......) (5)
- applet (1)
- VB.net/C#.net/JNI (20)
- css (1)
- Sqlite (1)
- servlet (1)
- REST (1)
最新评论
-
wenhurena:
能不能给一下解压密码roki.work.2017@gmail. ...
Ebs解体新書と学習資料1 -
liutao1600:
楼主写的太好了,每天学习~~
Spring_MVC(6)测试 -
liutao1600:
太好了,每天学习你的文章~~~
Spring_MVC(3)表单页面处理 -
liutao1600:
学习了,太好了
Spring_MVC(2)控制层处理 -
liutao1600:
学习了~~~
Spring_MVC(1)构建简单web应用
在Web开发中,总会遇到需要用户输入日期的情况。一般都是提供一个text类型的input供用户输入日期。然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性。除此之外,用户输入日期也是一件不爽的事,如果用户可以直接选择日期,这两个问题都解决了。听起来很不错。实际上,很多开发者都是这么做的。
我们可以自己用javascript写一个日期选择控件,然而,想要写的很好、很漂亮却需要花不少时间和精力。jQuery有一个UI插件:datepicher,可以帮我们实现该功能,而且界面很漂亮。下面就学学如何使用它吧。
datepicher插件是jQuery UI的一个插件,它提供一个日期弹出窗口(或直接显示在页面),供用户选择日期。
datepicher插件的使用很简单,语法如下:
其中optional是一个对象,该对象的每一个属性及含义可以参看官方文档:http://jqueryui.com/demos/datepicker/。在此,仅介绍一些常用的属性。
1、datepicher最简单的使用
Javascript代码
$("#regDate").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中,应该作如下几处修改:
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 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 {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 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属性,这样便可以只配置一次了。
我们可以自己用javascript写一个日期选择控件,然而,想要写的很好、很漂亮却需要花不少时间和精力。jQuery有一个UI插件:datepicher,可以帮我们实现该功能,而且界面很漂亮。下面就学学如何使用它吧。
datepicher插件是jQuery UI的一个插件,它提供一个日期弹出窗口(或直接显示在页面),供用户选择日期。
datepicher插件的使用很简单,语法如下:
$("#regDate").datepicher(optional);
其中optional是一个对象,该对象的每一个属性及含义可以参看官方文档:http://jqueryui.com/demos/datepicker/。在此,仅介绍一些常用的属性。
1、datepicher最简单的使用
Javascript代码
$("#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)',
- });
$("#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]));
- }
- });
- });
$(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 {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 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 {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 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属性,这样便可以只配置一次了。
发表评论
-
jqgird
2011-05-31 23:06 1513http://a3mao.javaeye.com 上 ... -
jquery好站
2010-11-05 20:05 897http://www.ndoherty.biz/ -
jsTree
2010-09-08 23:47 5248一、JStree的简单介绍 1.关于jstree jsTree ... -
jstree
2010-09-08 09:22 1392jstree 主页 : http://www.jstree.c ... -
JS 动态树 异步加载树 xloadtree WebFXLoadTree
2010-09-06 22:24 2308资料地址: http://webfx.eae.net/dht ... -
dtree demo example
2010-09-01 00:41 1931<html> <head> ... -
dtree 用法
2010-09-01 00:03 1432解压缩dtree.zip 包。 dtree目录下包括这些文件 ... -
dhtmlxtree demo
2010-08-31 23:56 949实例 -
Jquery学习
2010-08-04 14:06 920demo-1 ======页面加载完成后。执行alert(' ... -
jquery Ajaxupload应用
2010-07-21 16:08 11517AjaxUpload Jquery插件AjaxUploa ... -
jquery ui datepicker使用和下载地址
2010-07-21 12:32 4446先堆几个地址: JQuery官方地址:http://jq ... -
jquery日历控件
2010-07-21 09:57 6599Jquery日历控件合集 FullCale ... -
jquery实现图片左右滚动类似京东
2010-05-19 08:19 1301附件 -
jquery实现图片左右滚动类似京东
2010-05-17 23:26 3111类似京东图片嗷嗷转! -
dhtmlxTree
2010-05-17 08:19 792html树形菜单
相关推荐
在Web开发中,日期和时间的选择常常是一项必不可少的功能,jQuery UI Datepicker插件是一个非常流行的选择工具,它为用户提供了直观、易于使用的日期选择界面。然而,Datepicker默认只支持日期选择,不包含时间选择...
《jQuery UI Datepicker全主题详解》 在网页开发中,日期选择器是一个常见的交互元素,它使得用户能够方便地输入或选择日期。jQuery UI库中的Datepicker组件是此类功能的一个强大实现,它提供了丰富的功能和多样的...
jQuery UI Datepicker IE8 使用的基本解决方法:解决:IE8无法响应其中jquery.ui.datepicker部分标签a(无href)的onclick事件,和td由于放入标签a href="#",无法响应自身onclick事件,只验证了icon-trigger模式,...
简要修改Jquery UI DatePicker,可以选择时间(小时,分),有需要的朋友可以参考一下。 补充说明:上面的代码做好后,没怎么测试,选择的时间是有问题的:问题1:选择的月份比当前月份少1,问题2:当选择的月份和...
jquery datepicker 的中文包...<link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#datepicker" ).datepicker({dateFormat:"yy-mm-dd",regional:$.datepicker.regional['zh-CN']});
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
jquery的日期插件Datepicker,这两天正好研究完了,将研究结果分享下,单独的封装汉化版本,都有注释,好修改也好使用,注意保持images里面图片的名称和路径,red-datepicker.css可以定义日期div的样式,我自己在源...
### jQuery UI 中 Datepicker 控件使用详解 #### 一、简介与基本使用 **Datepicker** 是 jQuery UI 提供的一个非常实用的日期选择插件,它可以帮助开发者轻松地在网页上添加日期选择功能。要使用 Datepicker,首先...
本文将深入探讨如何使用 jQuery UI Datepicker 实现日期范围的选择,并提供中文界面。 首先,我们需要引入 jQuery UI 的库。这通常包括 jQuery 核心库和 jQuery UI 的 CSS 和 JavaScript 文件。在 HTML 文档的头部...
**jQuery UI Datepicker是最受欢迎的JavaScript日历插件之一,尤其在jQuery库的广泛使用下,它成为开发人员实现日期选择功能的首选工具。本文将深入探讨Datepicker控件的关键特性、使用方法以及如何与其他技术如Java...
`jQuery UI Datepicker`是jQuery库的一个扩展,用于在网页上创建交互式日期选择器。这个控件使得用户能够方便地选择日期,广泛应用于表单输入、日程管理和其他需要日期选择的应用场景。以下是关于`jQuery UI ...
jQuery UI Datepicker是一款广泛使用的JavaScript库,它是jQuery UI框架的一部分,专门用于添加日期选择功能到网页上。这个插件提供了一种优雅的方式来显示和选择日期,可以与timepicker插件结合,形成一个完整的...
在页面中使用Datepicker之前,首先需要引入jQuery库和jQuery UI的CSS与JS文件。确保在HTML文件中添加以下代码: ```html <!DOCTYPE html> <title>jQuery UI Datepicker示例 ...
@Scripts.Render("~/bundles/jqueryui") <!-- 假设你已经配置好 jQuery UI 的脚本捆绑包 --> $(function() { $("#datepicker").datepicker({ beforeShowDay: function(date) { var day = date.getDay(); ...
**jQuery Mobile Datepicker** 是一个专门用于移动设备的日期选择器插件,它扩展了标准的jQuery UI Datepicker,使其更适合在触摸屏设备上使用。这个插件在原生的日期选择器基础上增加了对移动环境的优化,如响应式...
<script src="js/jquery.ui.datepicker-zh-CN.js"></script> 去掉该行,全英文。格式也好了很多! 期待后续的高手修改 该资源来自于网上一哥们 <script type="text/javascript" src="js/jquery-ui-timepicker-addon...
NULL 博文链接:https://flyer0126.iteye.com/blog/946177
jquery-ui中文日历控件,使用的时候记得先把文档编码改为UTF-8,否则中文显示乱码!
1. JQuery UI datepicker的基本使用和API。 2. 如何扩展JQuery UI插件以添加时分秒选择功能。 3. 设计和实现皮肤切换的机制,包括CSS样式和用户界面交互。 4. 使用JavaScript和HTML创建动态交互的示例页面,如`index...
首先,为了实现`jQuery UI Datepicker`,你需要先从官方网站(https://jqueryui.com/datepicker/)下载最新的版本。`jquery-ui-1.8.16.custom.zip`这个文件名表明这是一个自定义构建的版本,可能包含了特定的功能集...