显示到时分秒的日期插件

效果如图所示

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

显示到时分秒的日期插件相关推荐

element时间选择器限制到时分秒_ElementUI日期选择器时间选择范围限制
Element是一套基于vue2.x的一个ui框架.官方文档也很详细,这里记录一个element-ui日期插件的补充官方文档中使用picker-options属性来限制可选择的日期,下面举例补充: ...
element时间选择器限制到时分秒_element-ui 日期时间选择器限制日期以及时间范围...
element-ui 日期时间选择器限制日期以及时间范围. 实现效果: 实现方式: 业务背景: 日期:只能选择今天以后的日期(包含今天), 时间:只能选择当前日期时间一小时以后的时间. 实现效果: 实 ...
Java通过mybatis插入Oracle数据库中Date格式不显示到时分秒问题
我在用mybatis generator生成代码后,执行查询语句时,Oracle里的Date类型字段只精确到年月日,后面时分秒都为零. 后来发现是jdbcType问题,改成 jdbcType=&quo ...
将精确到时分秒的日期截取到年月日
1. import time, datetime SXRQArray = time.strptime(str(self.a[z]['SXRQ']), "%Y-%m-%d %H:%M:%S&q ...
winfrom dev控件gridcontrol精确到时分秒的日期格式设置
https://www.cnblogs.com/feilong3540717/archive/2012/02/14/2350536.html
SSH日期录入，日期精确不能精准到时分秒处理
数据库类型定义为datetime的时候,数据库是精确到时分秒的,我们要录入的时候,hibernate只能用save方法进行录入,无法使用hql语句录入.但是会有很多人录入的时候日期只是精确到日,这是为 ...
ORACLE数据库日期更新到时分秒格式
插入数据库(更新到时分秒): UPDATE TOKEI_IN_BK_CSV SET USR_ID = 'VENAS',YMDT = to_date('2018/04/13 16:17:06','yyy ...
关于bootstrap日期选择器显示时分秒的问题
bootstrap时间选择器时分秒显示是由 minView 属性控制 minView :属性控制显示的时间精度,该属性取值分三种,有效的值有两种第一种: 负数, 会出现时分秒的选择框但是值选了不生效 ...
My97DatePicker-WdatePicker日历日期插件详细示例
插件下载地址: https://download.csdn.net/download/lianzhang861/10433412 此日期插件功能还可以,用着挺顺手目前的版本是:4.8 正式版 My9 ...

显示到时分秒的日期插件

显示到时分秒的日期插件相关推荐

最新文章

热门文章