项目中需要用到精确到秒的日期控件，到网上搜了一下，发现有一个JQuery控件可以实现该功能---TimerPicker。但是官网上没有提供该控件的完整Demo，而且没有提供汉化包，所以自己汉化了一下，以供需要的朋友参考。

　　效果图如下：

　　首先在页面中引用一下库：

<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>

Demo下载：精确到秒的JQuery日期控件

来自 : http://www.cnblogs.com/tianzhiliang/archive/2012/10/31/2747641.html

精确到秒的JQuery日期控件的更多相关文章

  1. 关于jquery日期控件及时间格式转换2017.05.27

    开始时间:<input type="date" id="starttime" class="time"/>//data为日期控件 ...

  2. jquery 日期控件

    控件官网: http://www.interidea.org/demo/icalendar.php#demohtml绑定控件 $("#startdate").icalendar({ ...

  3. jquery日期控件+时分秒

    因为项目需要,一些时间上的查询要精确的时分.先看下效果图吧. 所需要的js 跟css 文件 jsp://特别注意引入的先后顺序 <link rel="stylesheet" ...

  4. jQuery Datepicker日期控件

    datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. R ...

  5. JQuery datepicker 日期控件设置

    datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...

  6. jquery datepicker-强大的日期控件

    在web开发中,总会遇到需要用户输入日期的情况.一般都是提供一个text类型的input供用户输入日期.然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性.除此之外,让用户输入日期也是 ...

  7. jQuery里面的datepicker日期控件默认是显示英文的，如何显示中文或其他语言呢？

    jQuery里面的datepicker日期控件默认是显示英文的,如何让他显示中文或其他呢? [官方的写法]: (1)引入JS文件: <script type="text/javascr ...

  8. jQuery UI 日期控件--datepicker

    在web开发中,日期的输入经常会遇到.我们会用的解决方法有: 1.自己写css和js,对日期进行控制:----有点浪费精力和时间: 2.用easyui插件中的日期插件来实现: 3.用juqery-ui ...

  9. 用jquery实现日期控件

    用jquery实现的日期控件,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. PV信号量的一些理解

    进程通常分为就绪.运行和阻塞三个工作状态.三种状态在某些条件下可以转换,三者之间的转换关系如下:   进程三个状态之间的转换就是靠PV操作来控制的.PV操作主要就是P操作.V操作和信号量.其中信号量起 ...

  2. 关于Patter类和Match类

    部分引用自: http://developer.51cto.com/art/200906/131761.htm 本文将介绍Java正则表达式中的Pattern类与Matcher类.首先我们要清楚指定为 ...

  3. 输入参数varargin

    一种特别的输入参数varargin 可以在自定义函数中得到,这种函数支持输入参数的变量的个数.这个参数显在输入参数列表的最后一项,它返回一个单元阵列,所以一个输入实参可以包括任意数目的实参.每一个实参 ...

  4. 268条PCB Layout设计规范

    1 PCB布线与布局 PCB布线与布局隔离准则:强弱电流隔离.大小电压隔离,高低频率隔离.输入输出隔离.数字模拟隔离.输en入输出隔离,分界标准为相差一个数量级.隔离方法包括:空间远离.地线隔开. 2 ...

  5. li 水平排列并自动填满 ul

    找了li 如何水平排列并自动填满 ul,同时 li 宽度平均?资料,里面有提到"请用js动态计算保证兼容性", 因为我想实现的是,水平滚动条,ul的上级div是固定的宽度1000p ...

  6. scala学习笔记：match表达式

    写了一个超级长的表达式,估计不是最简洁的: scala> def foo(ch:Any)=ch match { case true=>"male";case false ...

  7. AndroidStudio学习记录

    AndroidStudio学习记录 1. 插件的使用. plugins.jetbrains.com插件网站. 2. 目录介绍: 1.Studio中有Project和Module的概念,前面说到Stud ...

  8. sqlserver中的聚合函数

    聚合函数:就是按照一定的规则将多行(Row)数据汇总成一行的函数,对数据进行汇总前,还可以按特定的列(coloumn)将数据进行分组(group by)再汇总,然后按照再次给定的条件进行筛选 一:Co ...

  9. RDLC打印或导出Word的 分页设置 页边距和页面大小

    RDLC 导出Word的时候发现,Word的尺寸和页边距有问题,查了MSDN看到这样一段话 Page Sizing When the report is rendered, the Word page ...

  10. Java实战之04JavaWeb-04JSP、EL表达式、JSTL标签库

    一.jsp部分 只要是与页面显示相关的都是重点 1．jsp的脚本 <%java代码%>:被翻译到service方法内部,局部变量,局部的功能 <%=表达式或变量%>:翻译成se ...