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

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

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

　需要引入的相关js：　

<link rel="stylesheet" type="text/css" href="css/jquery.ui.custom.min.css" /> 
<script type="text/javascript" src="js/jquery..min.js"></script> 
<script type="text/javascript" src="js/jquery.ui.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery.ui.datepicker.js"></script> 
<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中的调用代码很简单：

<input type="text" id="dateTime" name="dateTime" value='<fmt:formatDate value="${dateTime}" pattern="yyyy-MM-dd HH:mm:ss"/>'/>

$(function() {
    $('#dateTime').datetimepicker(); 
}

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

3~5行：初始化

第二种，easyui

需要引入的js：

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

页面和js调用部分：

<input type="text" id="dateTime" name="dateTime" value='<fmt:formatDate value="${dateTime}" pattern="yyyy-MM-dd HH:mm:ss"/>'/>

$(function() {
    $('#dateTime').datetimebox({
        showSeconds: true
    });    
}

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

3~6行：初始化

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

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

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

function newDate(str) {
    str = str.split(" ");
    str1 = str[0].split("-");
    str2 = str[1].split(":");
    var date = new Date();
    date.setFullYear(str1[0], str1[1]-1, str1[2]);
    date.setHours(str2[0], str2[1], str2[2], 0);
    return date;
}    

var dateTime = $('#dateTime').datetimebox('getValue');
dateTime = newDate(dateTime).getTime();

1~9行：实现时间的转换

11行：从easyui时间控件中获取值

12行：获取需要的时间戳

一切ok，O(∩_∩)O~~