标签：style blog color java 使用 io for ar
工作中用到日期时间插件，需要精确到秒,总结工作所得，标记...
第一种，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();
1~9行：实现时间的转换
11行：从easyui时间控件中获取值
12行：获取需要的时间戳
一切ok，O(∩_∩)O~~
工作笔记---js时间插件的使用,布布扣,bubuko.com
标签：style blog color java 使用 io for ar
原文地址：http://www.cnblogs.com/guyuexia/p/3917587.html
