jQuery DateTimePicker 日期和时间插件
jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
日期选择插件是一个配置灵活的插件，你可以定义它的展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等
文档和下载地址：
1、jQuery-Timepicker-Addon的下载地址：https://github.com/trentrichardson/jQuery-Timepicker-Addon
2、jQuery-Timepicker-Addon的的文档地址：http://trentrichardson.com/examples/timepicker/
3、DateTimePicker的演示地址：http://www.helloweba.com/demo/timepicker/
4、JQuery-UI下载地址：http://jqueryui.com/themeroller/
6、JQuery下载地址：http://www.jq22.com/jquery-info122
下面先看效果图：
引入js文件：
<script src="js/jquery-3.1.1.min.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
<link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script>
<script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>
<link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />
1、默认的效果：
关键代码：
$("#defult").datetimepicker();
2、控制到时分秒：
关键代码：
$('#date').prop("readonly", true).datetimepicker({
timeText: '时间',
hourText: '小时',
minuteText: '分钟',
secondText: '秒',
currentText: '现在',
closeText: '完成',
showSecond: true, //显示秒
timeFormat: 'HH:mm:ss' //格式化时间
});
3、控制到年月日
关键代码：
$("#date_yy-mm-dd").prop("readonly", true).datepicker({
changeMonth: true,
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
}
});
4、开始结束区间
关键代码：
$("#date_start").prop("readonly", true).datepicker({
changeMonth: true,
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
$("#date_end").datepicker("option", "minDate", selectedDate);
}
});
$("#date_end").prop("readonly", true).datepicker({
changeMonth: true,
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
$("#date_start").datepicker("option", "maxDate", selectedDate);
$("#date_end").val($(this).val());
}
});
5、时分秒选择：
关键代码：
$('#date_hhmmss').prop("readonly", true).timepicker({
timeText: '时间',
hourText: '小时',
minuteText: '分钟',
secondText: '秒',
currentText: '现在',
closeText: '完成',
showSecond: true, //显示秒
timeFormat: 'HH:mm:ss' //格式化时间
});
6、开始结束区间(第二种写法)：
关键代码：
$.timepicker.dateRange(
$("#date_start_1"),
$("#date_end_1"), {
minInterval: (1000 * 60 * 60 * 24 * 1), // 区间时间间隔时间
maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 区间时间间隔时间
start: {}, // start picker options
end: {} // end picker options});
}
);
完整代码：
<!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>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
<link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="jQuery-Timepicker/jquery-ui-timepicker-addon.min.js"></script>
<script type="text/javascript" src="jQuery-Timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>
<link href="jQuery-Timepicker/jquery-ui-timepicker-addon.min.css" rel="stylesheet" />
<script type="text/javascript">
(function($) { $(function() {
$.datepicker.regional['zh-CN'] = {
changeMonth: true,
changeYear: true,
clearText: '清除',
clearStatus: '清除已选日期',
closeText: '关闭',
closeStatus: '不改变当前选择',
prevText: '<上月',
prevStatus: '显示上月',
prevBigText: '<<',
prevBigStatus: '显示上一年',
nextText: '下月>',
nextStatus: '显示下月',
nextBigText: '>>',
nextBigStatus: '显示下一年',
currentText: '今天',
currentStatus: '显示本月',
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
monthStatus: '选择月份',
yearStatus: '选择年份',
weekHeader: '周',
weekStatus: '年内周次',
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
dayStatus: '设置 DD 为一周起始',
dateStatus: '选择 m月 d日, DD',
dateFormat: 'yy-mm-dd',
firstDay: 1,
initStatus: '请选择日期',
isRTL: false
}; }); $(function() { $.datepicker.setDefaults($.datepicker.regional['zh-CN']); $("#defult").datetimepicker(); $('#date').prop("readonly", true).datetimepicker({
timeText: '时间',
hourText: '小时',
minuteText: '分钟',
secondText: '秒',
currentText: '现在',
closeText: '完成',
showSecond: true, //显示秒
timeFormat: 'HH:mm:ss' //格式化时间
}); $("#date_yy-mm-dd").prop("readonly", true).datepicker({
changeMonth: true,
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) { } }); $("#date_start").prop("readonly", true).datepicker({
changeMonth: true,
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
$("#date_end").datepicker("option", "minDate", selectedDate);
}
}); $("#date_end").prop("readonly", true).datepicker({
changeMonth: true,
dateFormat: "yy-mm-dd",
onClose: function(selectedDate) {
$("#date_start").datepicker("option", "maxDate", selectedDate);
$("#date_end").val($(this).val());
}
}); $('#date_hhmmss').prop("readonly", true).timepicker({
timeText: '时间',
hourText: '小时',
minuteText: '分钟',
secondText: '秒',
currentText: '现在',
closeText: '完成',
showSecond: true, //显示秒
timeFormat: 'HH:mm:ss' //格式化时间
}); $.timepicker.dateRange(
$("#date_start_1"),
$("#date_end_1"), {
minInterval: (1000 * 60 * 60 * 24 * 1), // 区间时间间隔时间
maxInterval: (1000 * 60 * 60 * 24 * 1), // 1 days 区间时间间隔时间
start: {}, // start picker options
end: {} // end picker options});
}
); }); }(jQuery));
</script>
</head> <body> 默认：
<input id="defult" />
<br/>
<br />
控制到时分秒：<input id="date" />
<br />
<br /> 控制到年月日：
<input id="date_yy-mm-dd" />
<br />
<br /> 开始结束区间：
<br />
<input id="date_start" />~<input id="date_end" />
<br />
<br /> 时分秒选择：
<br />
<input id="date_hhmmss" />
<br />
<br /> 开始结束区间(第二种写法)：
<br />
<input id="date_start_1" />~<input id="date_end_1" />
</body> </html>
代码的下载地址：http://pan.baidu.com/s/1dFl27hJ 提取密码：adtu
jQuery DateTimePicker 日期和时间插件的更多相关文章
- jquery datetimepicker 日期时间控件的使用及参数说明
首先下载 jquery.datetimepicker.css jquery.datetimepicker.main.js 1. 引入css和js (注:该控件要依赖于jquery) <link ...
- DateTimePicker：jQuery日期和时间插件
点击在线预览效果 点击下载该插件 下面是效果截图:
- jQuery日期和时间插件（jquery-ui-timepicker-addon.js）中文破解版使用
<html> <head> <title></title> <link type="text/css" href=" ...
- datetimepicker bootstrap的时间插件显示位置问题及其他配置
位置问题: 在bootstrap中用 datetimepicker 时默认是在输入框下面弹出的, 但是遇到输入框在屏幕最下面时,日期选择框会有一部分在屏幕下面,显示不了,因此需要能够从上面弹出. 可以 ...
- jQuery DateTimePicker 日期控件
在线实例 实例演示 使用方法 <input id="datetimepicker" type="text" > 复制 $('#datetimepic ...
- 微信小程序之日期与时间插件
页面 <picker mode="time" value="{{time}}" start="{{minTime}}" end=&qu ...
- bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件
<!DOCTYPE html><head> <title>时间插件测试</title><style type="text/css&quo ...
- 1、用datetimepicker插件实现限定时间范围的选择 2、时间插件实现默认当天的时间和只能选择小于今天的日期
一.用datetimepicker插件实现限定时间范围的选择 1.下面是要实现的效果图,让开始时间只能从 2018-7-1 到 2018-7-7 选择. 2.html的结构 <div cla ...
- 【Bootstrap】bootstrap-datetimepicker日期时间插件
[bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...
随机推荐
- 调用WCF不需要添加服务引用，使用一个WCFHelper类就可以
效果图: 调用过程: string WCFURL = "http://localhost:100/Service1.svc"; UserRequest user = new Use ...
- 在公司里面，如何让笔记本连上wifi？
1.复制谷歌浏览器图标的快捷方式,重命名为chrome Android,鼠标右键设置该快捷方式的属性,在目标处,加上 C:\Users\admin\AppData\Local\Google\Chrom ...
- 大家都在用PDA条码扫描枪管理企业仓库 PDA无线数据采集程序
PDA数据采集器又称之为手持终端,这些都是用于扫描货物条码统计数据用的,PDA扫描枪有效提高企业仓库管理,在仓库管理中引入条码技术,对仓库的到货检验.入库.出库.调拨.移库移位.库存盘点等各个作业环节 ...
- files list file for package 'xxx' is missing final newline
#!/usr/bin/python # 8th November, 2009 # update manager failed, giving me the error: # 'files list f ...
- CSharp数据库代码生成工具
项目中遇到很多数据库表字段特别多的项目,手动一个一个去敲也不知道敲到什么时候,突发奇想做一个工具一劳永逸.花了一晚上做了这个东西,代码写的比较乱,用这个工具后减少了很多时间. Git地址:https: ...
- what do i get for？
有时候经常反思,做事究竟为了什么? 有时候,又无法解释,过去做的一些事情,是为了什么? 就像上小学时候明明挺到讨厌学习的,但上了初中后就开始玩命学习了 上高中时候认为自己真的是喜欢上学习了,上大学尼玛 ...
- 斯考特·杨（Scott Young）快速学习方法
上午在网上看到了斯考特·杨(Scott Young)的快速学习方法,感觉很受鼓舞. 现在已经读研究生了,可是发现自己自从上大学以来到现在,发现自己的学习方法有很大的问题. 我是个特别喜欢读书的人,在大 ...
- html5shiv.js and respond.min.js
因为用到这两个插件,所以记录下来.. html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持Css3 Media Quer ...
- Spring Mvc的入门
SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的. Spring Web MVC是什么: Sprin ...
- #1094 : Lost in the City
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Little Hi gets lost in the city. He does not know where he is ...