3、jQuery插件之datetimepicker时间插件
datetimepicker 插件用法及参数说明
// 选择时间和日期
$(".form-datetime").datetimepicker({weekStart:1,todayBtn:1,autoclose:1,todayHighlight:1,startView:2,forceParse:0,showMeridian:1,format:"yyyy-mm-dd hh:ii"});// 仅选择日期
$(".form-date").datetimepicker({language:"zh-CN",weekStart:1,todayBtn:1,autoclose:1,todayHighlight:1,startView:2,minView:2,forceParse:0,format:"yyyy-mm-dd"});// 选择时间
$(".form-time").datetimepicker({language:"zh-CN",weekStart:1,todayBtn:1,autoclose:1,todayHighlight:1,startView:1,minView:0,maxView:1,forceParse:0,format:'hh:ii'});
weekStart
Integer. 默认值:0
一周从哪一天开始。0(星期日)到6(星期六)
startDate
Date. 默认值:开始时间
The earliest date that may be selected; all earlier dates will be disabled.
endDate
Date. 默认值:结束时间
The latest date that may be selected; all later dates will be disabled.
daysOfWeekDisabled
String, Array. 默认值: '', []
Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: disable weekends: '0,6'
or [0,6]
.
autoclose
Boolean. 默认值:false
当选择一个日期之后是否立即关闭此日期时间选择器。
startView
Number, String. 默认值:2, 'month'
日期时间选择器打开之后首先显示的视图。 可接受的值:
- 0 or 'hour' for the hour view
- 1 or 'day' for the day view
- 2 or 'month' for month view (the default)
- 3 or 'year' for the 12-month overview
- 4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.
minView
Number, String. 默认值:0, 'hour'
日期时间选择器所能够提供的最精确的时间选择视图。
maxView
Number, String. 默认值:4, 'decade'
日期时间选择器最高能展示的选择范围视图。
todayBtn
Boolean, "linked". 默认值: false
如果此值为true 或 "linked",则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话,"Today" 按钮仅仅将视图转到当天的日期,如果是"linked",当天日期将会被选中。
todayHighlight
Boolean. 默认值: false
如果为true, 高亮当前日期。
keyboardNavigation
Boolean. 默认值: true
是否允许通过方向键改变日期。
forceParse
Boolean. 默认值: true
当选择器关闭的时候,是否强制解析输入框中的值。也就是说,当用户在输入框中输入了不正确的日期,选择器将会尽量解析输入的值,并将解析后的正确值按照给定的格式format
设置到输入框中。
minuteStep
Number. 默认值: 5
此数值被当做步进值用于构建小时视图。对于每个 minuteStep
都会生成一组预设时间(分钟)用于选择。
pickerPosition
String. 默认值: 'bottom-right' (还支持 : 'bottom-left')
此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方。
initialDate
Date or String. 默认值: new Date()
You can initialize the viewer with a date. By default it's now, so you can specify yesterday or today at midnight ...
方法:
.datetimepicker(options)
初始化日期时间选择器。
update
参数: None
使用当前输入框中的值更新日期时间选择器。
- $('#datetimepicker').datetimepicker('update');
setStartDate
参数:
- startDate (String)
给日期时间选择器设置一个新的起始日期。
- $('#datetimepicker').datetimepicker('setStartDate','2012-01-01');
setEndDate
参数:
- endDate (String)
给日期时间选择器设置结束日期。
- $('#datetimepicker').datetimepicker('setEndDate','2012-01-01');
setDaysOfWeekDisabled
参数:
- daysOfWeekDisabled (String|Array)
Sets the days of week that should be disabled.
- $('#datetimepicker').datetimepicker('setDaysOfWeekDisabled',[0,6]);
事件(Events):
Datetimepicker 类暴露了一组event用以对日期进行操作。
show
当选择器显示时被触发。
hide
当选择器隐藏时被触发。
changeDate
当日期被改变时被触发。
- $('#date-end')
- .datetimepicker()
- .on('changeDate',function(ev){
- if(ev.date.valueOf()<date-start-display.valueOf()){
- ....
- }
- });
直接上代码:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="jquery.min.js"></script>
<script src=" jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="jquery.datetimepicker.css" />
</head>
<body>
<form action="">
<p>开始时间:<input type="text" id="start"> 结束时间:<input type="text" id="end"></p>
</form>
</body>
<script>
$(document).ready(function(){
$('#start').datetimepicker({
format:"Y-m-d", //格式化日期
});
$('#end').datetimepicker({
lang:'ch',
format:"Y-m-d H:i:s",
});
});
</script>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="jquery.min.js"></script>
<script src="jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="jquery.datetimepicker.css" />
</head>
<body>
<form action="">
<p>开始时间:<input type="text" id="start"> 结束时间:<input type="text" id="end"></p>
</form>
</body>
<script>
$(document).ready(function(){
$.datetimepicker.setLocale('ch'); //设置为中文模式,换版本了,lang:"ch"不起作用了,现在这样的写法就是中文了
$('#start').datetimepicker({
format:"Y-m-d", //格式化日期
});
$('#end').datetimepicker({
format:"Y-m-d", //格式化日期
});
});
</script>
3、jQuery插件之datetimepicker时间插件相关推荐
- 可清空所选时间的jquery.datetimepicker时间插件
效果图: 点击垃圾桶图标可清空所选时间,重新进行选择. 直接用下方的css和js就好,这是在源码基础上修改的,可以直接替代源码,除了添加的清除功能外其他功能依旧在. css: 文件名称 jquery ...
- jQuery日期和时间插件 datetimepicker
获取插件Demo文件方式: 关注微信公众号"快乐干饭人的外卖券",发送"日期时间插件"6个字给公众号,免费获取 代码网盘链接.(注意文字不要写错哟!) date ...
- jQuery日期和时间插件(jquery-ui-timepicker-addon.js)中文破解版使用
简介 jQuery UI Datepicker日期选择插件很好用了,只不过只能精确到日,不能选择时间(小时分钟秒)很遗憾,而jquery-ui-timepicker-addon.js正是基于jQuer ...
- 【若依(ruoyi)】datetimepicker日期和时间插件
目录 前言 官网 控件绑定 `datetimepicker日期和时间插件` 前言 若依(ruoyi) 4.2 thymeleaf 模板 官网 https://github.com/smalot/boo ...
- angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
- html发展时间轴纵向插件,jquery响应式垂直时间轴插件vertical-timeline
插件描述:jquery-vertical-timeline是一款简单实用的jQuery响应式垂直时间轴插件. jquery-vertical-timeline 是一款简单实用的jQuery响应式垂直时 ...
- datepick二格式 化时间_bootstrap datetimepicker日期插件超详细使用方法介绍
本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下 首先在文件头部引入必要的文件: 想用中文显示,加入bootstrap-datetime ...
- 工作笔记---js时间插件的使用
工作中用到日期时间插件,需要精确到秒,总结工作所得,标记... 第一种,jquery-datapicker(默认是年月日),加上扩展jquery-ui-timepicker-addon.js(可以实现 ...
- 几个前端时间插件总结
几个前端时间插件总结 总结一下几款时间插件,分别是 - [ ] jeDate 手册http://www.jemui.com/jedate/ - [ ] bootstrap-datetimepicker ...
最新文章
- Googlequot;员工quot;曝内幕:Google员工的17个秘密
- 多线程—事件Event
- android 模拟 cdrom,stm32 usb 虚拟一个cdrom
- centos 5.0 编译安装apache 2.2.6+php5.2.5+mysql5.0.46+ZEND
- YUI3下widget的plugin开发
- 安卓checkbox无响应_【安卓手机】无法连接电脑的解决方法
- 高端存储器研发再获突破 集成电路国产化进程加快
- 联想小新潮7000黑苹果教程_联想小新潮7000-15笔记本安装win10系统操作教程
- 计算机科学导论定理八,计算机科学导论:思想与方法
- Fragment、FragmentActivity、Fragment生命周期及Fragment组件穿透
- 秀米html编辑器,ueditor集成秀米编辑器
- 腾讯面试总结——iOS开发
- jQuery weui Select组件显示指定值
- 搜扣扣三大频道闹元宵 优惠券、聚划算、九块邮正式上线
- 逻辑回归模型logistic原理详解
- Matlab:常见涡旋光束仿真
- 榜首易主!在线票务大战胜负已定,透过中影这个小动作早已看穿一切
- Linux系统-安装显卡GPU驱动的两种方式
- HashMap 源码深度分析
- jQuery基本介绍