项目中需要用到精确到秒的日期控件，到网上搜了一下，发现有一个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. 关于Git的merge和rebase命令解析

    git rebase是对提交执行变基的操作.即可以实现将指定范围的提交"嫁接"到另外一个提交智商. 其常用的命令格式有: 用法1:git rebase --onto <new ...

  2. CCLablettf读取显示xml文件内容显示中文

    CCDictionary *strings = CCDictionary::createWithContentsOfFile("tips2.xml"); const char *h ...

  3. ArrayUtils用法

    /* 1. ArrayUtils.isEmpty(strs) : 判断数组是否为空 , 不为空返回false,为空true */     ArrayUtils.isEmpty(new String[] ...

  4. IOS开发之NSPredicate谓词的用法

    编程的人员不管是上过大学还是从培训机构出来的或做后台的.前端的都应该SQL语句有所了解,我们知道,在SQL语句当中 where 条件表达式可以对二维关系表的数据做条件筛选.微软的C# .net中也实现 ...

  5. Javascript版选择下拉菜单互移且排序

    效果图如下: 代码如下: <html> <head> <title>Javascript版选择下拉菜单互移且排序</title> <meta ht ...

  6. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

  7. jQuery 源码分析 8： 回头看jQuery的构造器（jQuery.fn，jQury.prototype，jQuery.fn.init.prototype的分析）

    在第一篇jQuery源码分析中,简单分析了jQuery对象的构造过程,里面提到了jQuery.fn.jQuery.prototype.jQuery.fn.init.prototype的关系. 从代码中 ...

  8. android 电话拨号器

    电话拨号器(重点)            1.产品经理: 需求分析文档,设计原型图    2.UI工程师: 设计UI界面    3.架构师: 写架构,接口文档    4.码农: 服务端,客户端     ...

  9. IO流01_File类

    [分类] Java的IO通过java.io包下的类和接口来支持. 1.按照流向: 输入流     输出流 2.按照操作数据的大小: 字节流( 8位字节 )     字符流( 16位字节 ) 3.按照角 ...

  10. vs 2010 Cannot find or open the PDB file

    打开VS2010:工具-->选项-->>调试-->符号接下来就是选择Microsoft,然后确认  接着随便编译一个程序,过程会灰常的慢. 看到此目录下符号缓存了吗?C:\Us ...