显示到时分秒的日期插件

最新推荐文章于 2024-08-13 10:53:05 发布

Melody–Zhang

最新推荐文章于 2024-08-13 10:53:05 发布

阅读量2.4k

点赞数

分类专栏：日期插件

本文链接：https://blog.csdn.net/qq_15548121/article/details/80661850

版权

日期插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果如图所示

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title></title>
    <link href="css/base.css" rel="stylesheet"/>
    <link href="css/form.css" rel="stylesheet"/>
    <link href="css/table.css" rel="stylesheet"/>

//下面三个css一定要引用
    <link href="css/ui.theme.css" rel="stylesheet"/>
    <link href="css/jquery-ui.min.css" rel="stylesheet"/>
    <link href="css/jquery-ui-timepicker-addon.min.css" rel="stylesheet"/>
    <style>
        .input {
            height: 22px;
            line-height: 22px;
            background: #fff;
            border: 1px solid #d7dde4;
            color: #464c5b;
            padding: 0 4px;
            width: 150px;
            border-radius: 3px;
            outline: none;
            vertical-align: middle;
            display: inline-block;
            font-size:12px;
        }
    </style>

//下面三个js一定要引用

    <script src="js/jquery-1.11.3.js"></script>

<script src="js/jquery-ui.js"></script>

 <script type="text/javascript" src="js/jquery-ui-timepicker-addon.min.js">

</script> <script type="text/javascript">

//函数封装成function便于调用 function rangeTimePicker(startobj, endobj) {

 $.timepicker.setDefaults($.timepicker.regional["zh_CN"]);

$.timepicker.datetimeRange(startobj, endobj,

{ changeMonth : true,

changeYear : true,

showSecond : true,

showMillisec:false,

showMicrosec:false,

showTimezone:false,

minInterval : (1000 * 60 * 60), // 1hr

dateFormat : "yy-mm-dd",

 timeFormat : "HH:mm:ss",

 start : {}, // start picker options

 end : {} // end picker options

}) }

$(function () {

 $.timepicker.regional['zh_CN'] = {

 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],

 monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],

dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],

timeText: "选择时间",

hourText: "小时",

minuteText: "分钟",

 secondText: "秒",

 millisecText: "毫秒",

 currentText: "当前时间",

 closeText: "确定",

 ampm: false };

//此处调用前面定义的方法
                       rangeTimePicker($('#start'), $('#end'));
                   }
           )();
    </script>
</head>

<body>
<br/> 开始结束区间(第二种写法)：
<br/>起始时间
<input id="start" class="input" value="2018-04-02 13:42:45"/>
<br/>结束时间
<input id="end" class="input" value="2018-04-03 14:12:22"/>
<br/>

</body>

</html>

插件js下载地址及参数配置（option）http://trentrichardson.com/examples/timepicker/