jQuery DateTimePicker时间日期控件

简介: 在jquery ui里面有个控件DatePicker,只能选择日期。没有时间可以选择。我在这次项目中就遇到了要有日期也要时间一起显示的。在网上搜了一下找到了这个DateTimePicker时间日期控件。

在jquery ui里面有个控件DatePicker,只能选择日期。没有时间可以选择。我在这次项目中就遇到了要有日期也要时间一起显示的。在网上搜了一下找到了这个DateTimePicker时间日期控件。

     他里面说的会有几个bug的。我在这里也说说吧。因为我也遇到了这样的问题的:

1.当输入框输入的时间是0时,控件会显示不完整,就是因为有一个函数有bug,如下所示:

在jquery-calendar.js文件里面修改。


     trimNumber: function (value) {
         if (value == '')
             return '';
         while (value.charAt( 0 ) == ' 0 ' ) {
             value = value.substring( 1 );
         }
         return value;
     },

while (value.charAt( 0 ) == ' 0 ' ) {
             value = value.substring( 1 );
         }

如果,这里是0的话始终会出错,因为他的长度最后是1,不能执行substring(1),改成下面的就好了:

  
     trimNumber: function (value) {
         if (value == '')
             return '';
         while (value.charAt( 0 ) == ' 0 ' && value.length >1 ) {
             value = value.substring( 1 );
         }
         return value;
     },


--------------------------------------------------------------------------------


2.原作者是在jquery1.1.2的版本下面实现的,在最新的版本是1.4.2,这控件在1.4.2的版本下会出现异常,不能选择日期,是因为有几个选择器有问题:(我看的原文章说的1.3.2的版本。我用的1.4.2的版本照着这个方法改了,同样可以实现)

同样也是在jquery-calendar.js文件里面修改:

1          $('.calendar_daysRow td[a]').hover( // highlight current day
2             function() {
3                  $(this).addClass('calendar_daysCellOver');
4              }, function() {
5                  $(this).removeClass('calendar_daysCellOver');
6          });
7          $('.calendar_daysRow td[a]').click(function() { // select day
8              popUpCal.selectedDay = $("a",this).html();
9              popUpCal.selectDate();
10          });

上面的$('.calendar_daysRow td[a]')在jQuery 1.3.2中不能使用,$("a",this)也是有问题的,同时,在FireFox中,<a>的不能设置背景颜色,所以hover函数不起作用,把它设在<td>也能达到相同的效果,改成以下代码即可:

1         //$('.calendar_daysRow td a').hover( // highlight current day
2          $('.calendar_daysRow td').hover( // highlight current day
3             function() {
4                  $(this).addClass('calendar_daysCellOver');
5              }, function() {
6                  $(this).removeClass('calendar_daysCellOver');
7          });
8         //$('.calendar_daysRow td[a]').click(function() { // select day
9          $('.calendar_daysRow td a').click(function() { // select day
10             //alert("click");
11             //popUpCal.selectedDay = $("a",this).html();
12              popUpCal.selectedDay = $(this).html();
13              popUpCal.selectDate();
14          });

--------------------------------------------------------------------------------


呃。。忘了说了。要导入jquery.js,jquery-calendar.js,jquery-calendar.css 文件来用的。

这里有一个原文章里面的示例可以参考一下:(http://razum.si/jQuery-calendar/TimeCalendar.html


--------------------------------------------------------------------------------

3.我在单独的页面里面写了一个这个控件可以使用,而在我的项目里面弹出了一个层在层里面使用用不了。

原因是因为:

   其实控件已经出来了的。只是被我弹出来的div给挡住了,才会显示看着没有出来效果。

修改了jquery-calendar.css文件里面的一个calendar_div这个样式里面的z-index的值大于弹出来的层的值就可以了。

4.修改格式:

  在jquery-calendar.css文件里面有个dateFormat属性原来是mdy/显示出来就是mm/dd/yy 00:00:00AM

把他: 'YMD-',就成了mm-dd-yy 00:00:00AM 了。

http://hi.baidu.com/waterjiang/blog/item/87a9e10152aea26c3912bb1e.html

目录
相关文章
|
JavaScript 机器学习/深度学习 UED
jQuery weui时间选择器datetimepicker只要年月日解决方案
只想选择年月日,jquery-weui建议使用日历但实际的需求如果选择生日等等,日历选择的用户体验很不好,所以进行源码修改,看下面颜色标注。 HTML部分 下面是JS部分 $("#birth").
4920 0
|
JavaScript
jquery datetimepicker 配置参数
jquery datetimepicker 配置参数
362 0
|
JavaScript 前端开发
jquery datetimepicker日期时间控件
(function($) { $(function() { $.datepicker.
1498 0
|
Web App开发 JavaScript
jQuery DateTimePicker 日期时间控件
http://www.blogjava.net/amplifier/archive/2009/05/22/277405.html   三个文件的下载链接分别是: http://razum.
1077 0
|
7月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
38 0
|
8月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
30 0
|
3天前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
3天前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
21 0
|
3天前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
30 0