项目中需要用到精确到秒的日期控件，到网上搜了一下，发现有一个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. li 水平排列并自动填满 ul

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

  2. 关于error: cannot connect to daemon的解决办法

    执行adb devices时,如果出现以下错误: * daemon not running. starting it now on port 5037 * ADB server didn't ACK ...

  3. java中的拷贝文件FileChannel

    以前用Java拷贝文件,只知道写byte数组循环拷贝,今天知道了可以用FileChannel进行拷贝,上代码: 下边是传统的byte数组拷贝方法 </pre><pre name=&q ...

  4. Android 调用webService（.net平台）

    什么是webservice? Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和 ...

  5. Sql Server Profiler保存与重演跟踪

    重演跟踪的作用 可以将一个跟踪当做测试工具,当按照正确的顺序调用某些存储过程是肯能会重新生成特定的故障. 跟踪模板

  6. MySQL支持多种存储引擎

    MySQL的强大之处在于它的插件式存储引擎,我们可以基于表的特点使用不同的存储引擎,从而达到最好的性能. MySQL有多种存储引擎:MyISAM.InnoDB.MERGE.MEMORY(HEAP).B ...

  7. 【JAVA】浅谈java枚举类

    一.什么情况下使用枚举类? 有的时候一个类的对象是有限且固定的,这种情况下我们使用枚举类就比较方便? 二.为什么不用静态常量来替代枚举类呢? public static final int SEASO ...

  8. ### MATLAB - CUDA

    MATLAB下使用CUDA. #@author: gr #@date: 2014-04-08 #@email: forgerui@gmail.com 一. Matlab & C 1. 概念 M ...

  9. Hudson的安装配置

    Hudson的安装配置   目录 一.正文... 2 1.安装配置jdk. 2 2.安装配置tomcat7. 2 3.安装Hudson. 2 4.启动tomcat. 2 5.初识Hudson. 3 6 ...

  10. 第9条：覆盖equals时总要覆盖hashCode

    在每个覆盖equals方法的类中,也必须覆盖hashCode方法.否则,会违反Object.hashCode的通用约定,从而导致该类无法结合所有基于散列的集合一起正常工作,包括HashMap,Hash ...