工作笔记---js时间插件的使用

浏览数：68 / 时间：2015年06月09日

工作中用到日期时间插件，需要精确到秒,总结工作所得，标记...

第一种，jquery-datapicker（默认是年月日），加上扩展jquery-ui-timepicker-addon.js（可以实现时分秒）

　需要引入的相关js：　

1 <link rel="stylesheet" type="text/css" href="css/jquery.ui.custom.min.css" /> 
2 <script type="text/javascript" src="js/jquery..min.js"></script> 
3 <script type="text/javascript" src="js/jquery.ui.custom.min.js"></script> 
4 <script type="text/javascript" src="js/jquery.ui.datepicker.js"></script> 
5 <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>

　　这是我在工作中引入的相关的js和样式，其中timepicker需要再单独添加一些样式：

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px;}
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui_tpicker_hour_label,.ui_tpicker_minute_label,.ui_tpicker_second_label,.ui_tpicker_millisec_label,.ui_tpicker_time_label{padding-left:20px}

这样就OK了，js中的调用代码很简单：

1 <input type="text" id="dateTime" name="dateTime" value=‘<fmt:formatDate value="${dateTime}" pattern="yyyy-MM-dd HH:mm:ss"/>‘/>
2 
3 $(function() {
4     $(‘#dateTime‘).datetimepicker(); 
5 }

1行：页面中input标签，展示时间插件

3~5行：初始化

第二种，easyui

需要引入的js：

1 <link rel="stylesheet" type="text/css" href="${path }/resources/js/jquery.easyui.min.css"></link>
2 <script type="text/javascript" src="${path }/resources/js/jquery.min.js"></script>
3 <script type="text/javascript" src="${path }/resources/js/jquery.easyui.min.js"></script>

页面和js调用部分：

1 <input type="text" id="dateTime" name="dateTime" value=‘<fmt:formatDate value="${dateTime}" pattern="yyyy-MM-dd HH:mm:ss"/>‘/>
2 
3 $(function() {
4     $(‘#dateTime‘).datetimebox({
5         showSeconds: true
6     });    
7 }

1行：页面中input标签，展示时间插件

3~6行：初始化

话说，在做的过程中，遇到一个问题:当我想把页面中获取的时间格式（yyyy-MM-dd HH:mm:ss）的字符串转换为Date类型时，出现浏览器IE浏览器不兼容

var dateTime =new Date(dateTime).getTime();

这行代码在IE7下，会报错NaN,木有办法，参考网上的一些文章,自己写了转换部分的js

 1 function newDate(str) {
 2     str = str.split(" ");
 3     str1 = str[0].split("-");
 4     str2 = str[1].split(":");
 5     var date = new Date();
 6     date.setFullYear(str1[0], str1[1]-1, str1[2]);
 7     date.setHours(str2[0], str2[1], str2[2], 0);
 8     return date;
 9 }    
10 
11 var dateTime = $(‘#dateTime‘).datetimebox(‘getValue‘);
12 dateTime = newDate(dateTime).getTime();