时分秒 日期控件
文件下载地址 ：http://download.csdn.net/detail/ruishenh/6561061
项目中需要用到精确到秒的日期控件，到网上搜了一下，发现有一个JQuery控件可以实现该功能---TimerPicker。但是官网上没有提供该控件的完整Demo，而且没有提供汉化包，所以自己汉化了一下，以供需要的朋友参考。
效果图如下：图一
关键代码：
$(".ui_timepicker").datetimepicker({
showSecond:true,
timeFormat:'hh:mm:ss',
stepHour: 1,
stepMinute: 1,
stepSecond: 1
})
图二：
关键代码：
$(".ui_timepicker").timepicker({
showSecond:true,
timeFormat:'hh:mm:ss',
stepHour: 1,
stepMinute: 1,
stepSecond: 1
})
图三：
关键代码：
$(".ui_timepicker").datepicker({
showSecond:true,
timeFormat:'hh:mm:ss',
stepHour: 1,
stepMinute: 1,
stepSecond: 1
})
首先在页面中引用一下库：
<link type=
"text/css"
href=
"css/jquery-ui-1.8.17.custom.css"
rel=
"stylesheet"
/>
<link type=
"text/css"
href=
"css/jquery-ui-timepicker-addon.css"
rel=
"stylesheet"
/>
<script type=
"text/javascript"
src=
"js/jquery-1.7.1.min.js"
></script>
<script type=
"text/javascript"
src=
"js/jquery-ui-1.8.17.custom.min.js"
></script>
<script type=
"text/javascript"
src=
"js/jquery-ui-timepicker-addon.js"
></script>
<script type=
"text/javascript"
src=
"js/jquery-ui-timepicker-zh-CN.js"
></script>
|
汉化包代码：
(function ($) {
// 汉化 Datepicker
$.datepicker.regional[
'zh-CN'
] =
{
clearText:
'清除'
, clearStatus:
'清除已选日期'
,
closeText:
'关闭'
, closeStatus:
'不改变当前选择'
,
prevText:
'<上月'
, prevStatus:
'显示上月'
,
nextText:
'下月>'
, nextStatus:
'显示下月'
,
currentText:
'今天'
, currentStatus:
'显示本月'
,
monthNames: [
'一月'
,
'二月'
,
'三月'
,
'四月'
,
'五月'
,
'六月'
,
'七月'
,
'八月'
,
'九月'
,
'十月'
,
'十一月'
,
'十二月'
],
monthNamesShort: [
'一'
,
'二'
,
'三'
,
'四'
,
'五'
,
'六'
,
'七'
,
'八'
,
'九'
,
'十'
,
'十一'
,
'十二'
],
monthStatus:
'选择月份'
, yearStatus:
'选择年份'
,
weekHeader:
'周'
, weekStatus:
'年内周次'
,
dayNames: [
'星期日'
,
'星期一'
,
'星期二'
,
'星期三'
,
'星期四'
,
'星期五'
,
'星期六'
],
dayNamesShort: [
'周日'
,
'周一'
,
'周二'
,
'周三'
,
'周四'
,
'周五'
,
'周六'
],
dayNamesMin: [
'日'
,
'一'
,
'二'
,
'三'
,
'四'
,
'五'
,
'六'
],
dayStatus:
'设置 DD 为一周起始'
, dateStatus:
'选择 m月 d日, DD'
,
dateFormat:
'yy-mm-dd'
, firstDay: 1,
initStatus:
'请选择日期'
, isRTL:
false
};
$.datepicker.setDefaults($.datepicker.regional[
'zh-CN'
]);
//汉化 Timepicker
$.timepicker.regional[
'zh-CN'
] = {
timeOnlyTitle:
'选择时间'
,
timeText:
'时间'
,
hourText:
'小时'
,
minuteText:
'分钟'
,
secondText:
'秒钟'
,
millisecText:
'微秒'
,
timezoneText:
'时区'
,
currentText:
'现在时间'
,
closeText:
'关闭'
,
timeFormat:
'hh:mm'
,
amNames: [
'AM'
,
'A'
],
pmNames: [
'PM'
,
'P'
],
ampm:
false
};
$.timepicker.setDefaults($.timepicker.regional[
'zh-CN'
]);
})(jQuery);
|
注：汉化的逻辑就是，设置“zh-CN”标签的语言包内容，然后设置默认语言为“zh-CN”。
Demo页面的完成代码为：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>Timepicker Demo</title>
<link type=
"text/css"
href=
"css/jquery-ui-1.8.17.custom.css"
rel=
"stylesheet"
/>
<link type=
"text/css"
href=
"css/jquery-ui-timepicker-addon.css"
rel=
"stylesheet"
/>
<script type=
"text/javascript"
src=
"js/jquery-1.7.1.min.js"
></script>
<script type=
"text/javascript"
src=
"js/jquery-ui-1.8.17.custom.min.js"
></script>
<script type=
"text/javascript"
src=
"js/jquery-ui-timepicker-addon.js"
></script>
<script type=
"text/javascript"
src=
"js/jquery-ui-timepicker-zh-CN.js"
></script>
<script type=
"text/javascript"
>
$(function () {
$(
".ui_timepicker"
).datetimepicker({
//showOn: "button",
//buttonImage: "./css/images/icon_calendar.gif",
//buttonImageOnly: true,
showSecond:
true
,
timeFormat:
'hh:mm:ss'
,
stepHour: 1,
stepMinute: 1,
stepSecond: 1
})
})
</script>
</head>
<body>
<p>
<input type=
"text"
name=
"datetime"
class
=
"ui_timepicker"
value=
""
></p>
</body>
</html>
|