Datetimepicker.js用法
$('.form_date').datetimepicker({//初始化language: 'zh-CN',//weekStart: 1,//todayBtn: 1,autoclose: 1,//todayHighlight: 1,//startView: 2,//minView: 2,//forceParse: 0,format: 'yyyy-mm-dd',//格式化想要显示的时间格式minView: 'month'//日期时间选择器所能够提供的最精确的时间选择视图。
});$('.form_date').datetimepicker("update",'2015-01-22');//赋值$('.form_date').datetimepicker('setDate',(new Date()));//赋值,当前日期var year = $('.form_date').datetimepicker('getDate').getFullYear();//获取年
var month = $('.form_date').datetimepicker('getDate').getMonth();//获取月
var day = $('.form_date').datetimepicker('getDate').getDate();//获取日var hours = $('.form_date').datetimepicker('getDate').getHours();//获取小时
var minute = $('.form_date').datetimepicker('getDate').getMinutes();//获取分钟
var seconde = $('.form_date').datetimepicker('getDate').getSeconds();//获取秒
$('#datetimepicker').datetimepicker({value: '' // 设置当前datetimepicker的值rtl: false, // false 默认显示方式 true timepicker和datepicker位置变换format: 'Y/m/d H:i', // 设置时间年月日时分的格式 如: 2016/11/15 18:00formatTime: 'H:i', // 设置时间时分的格式formatDate: 'Y/m/d', // 设置时间年月日的格式startDate: false, // new Date(), '1986/12/08', '-1970/01/05','-1970/01/05',step: 10, // 设置时间时分的间隔closeOnDateSelect: false, // true 设置datepicker可点击 false 设置datepicker不可点击 实际上可以双击closeOnTimeSelect: true, // true 设置timepicker可点击 false 设置timepicker不可点击 closeOnWithoutClick: true, // true 设置点击input可以隐藏datetimepicker false 设置点击input不可以隐藏datetimepicker closeOnInputClick: true, // true 设置点击input可以隐藏datetimepicker false 设置点击input不可以隐藏datetimepicker (会有闪动 先隐藏 再显示)timepicker: true, // true 显示timepicker false 隐藏timepickerdatepicker: true, // true 显示datepicker false 隐藏datepickerweeks: false, // true 显示周数 false 隐藏周数defaultTime: false, // 如果输入值为空 可用来设置默认显示时间 use formatTime format (ex. '10:00' for formatTime: 'H:i') defaultDate: false, // 如果输入值为空 可用来设置默认显示日期 use formatDate format (ex new Date() or '1986/12/08' or '-1970/01/05' or '-1970/01/05')minDate: false, // 设置datepicker最小的限制日期 如:2016/08/15maxDate: false, // 设置datepicker最大的限制日期 如:2016/11/15minTime: false, // 设置timepicker最小的限制时间 如:08:00maxTime: false, // 设置timepicker最大的限制时间 如:18:00allowTimes: [], // 设置timepicker显示的时间 如:allowTimes:['09:00','11:00','12:00','21:00']opened: false, // false默认打开datetimepicker可关闭 true打开datetimepicker后不可关闭initTime: true, // 设置timepicker默认时间 如:08:00inline: false, // ture设置datetimepicker一直显示theme: '', // ture设置datetimepicker显示样式 如: 'dark'withoutCopyright: true, // ture默认隐藏左下角'xdsoft.net'链接 false 显示左下角'xdsoft.net'链接 inverseButton: false, // false 默认 true datepicker的上一月和下一月功能互换 timepicker的上下可点击按钮功能互换hours12: false, // true设置12小时格式 false设置24小时格式next: 'xdsoft_next', // 设置datepicker上一月按钮的样式prev : 'xdsoft_prev', // 设置datepicker下一月按钮的样式dayOfWeekStart: 0, // 设置默认第-列为周几 如:0 周日 1 周一parentID: 'body', // 设置父级选择器timeHeightInTimePicker: 25, // 设置timepicker的行高timepickerScrollbar: true, // ture设置timepicker显示滑动条 false设置timepicker不显示滑动条todayButton: true, // ture显示今天按钮 false不显示今天按钮 位置在datepicker左上角prevButton: true, // ture显示上一月按钮 false不显示上一月按钮 位置在datepicker左上角nextButton: true, // ture显示下一月按钮 false不显示下一月按钮 位置在datepicker又上角scrollMonth: true, // ture 设置datepicker的月份可以滑动 false设置datepicker的月份不可以滑动lazyInit: false, // 翻译: 初始化插件发生只有当用户交互。大大加速插件与大量的领域的工作mask: false, // 使用输入掩码。真正的-自动生成一个字段的“格式”的面具,从0到9的数字,设置为值的最高可能的数字。例如:第一个小时的数字不能大于2,而第一位数字不能大于5 如:{mask:'9999/19/39 29:59',format:'Y/m/d H:i'}validateOnBlur: true, // 失去焦点时验证datetime值输入,。如果值是无效的datetime,然后插入当前日期时间值yearStart: 1950, // 设置最小的年份 yearEnd: 2050, // 设置最大的年份monthStart: 0, // 设置最小的月份monthEnd: 11, // 设置最大的月份roundTime: 'round', // 设置timepicker的计算方式 round四舍五入 ceil向上取整 floor向下取整allowDateRe : null, // 设置正则表达式检查日期 如:{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' }disabledDates : [], // 设置不可点击的日期 如:disabledDates: ['21.11.2016','22.11.2016','23.11.2016','24.11.2016','25.11.2016','26.11.2016']disabledWeekDays: [], // 设置不可点击的星期 如:disabledWeekDays:[0,3,4]yearOffset: 0, // 设置偏移年份 如:2 代表当前年份加2 -2 代表当前年份减2beforeShowDay: null, // 显示datetimepicker之前可调用的方法 {beforeShowDay:function(d) {console.log("bsd"); } }enterLikeTab: true, // tab按键均可使datetimepicker关闭 true点击回车键可使datetimepicker关闭 false点击回车键不可使datetimepicker关闭 showApplyButton: false // 相当于确定按钮 true显示 false隐藏
});
简单叙述jquery datetimepicker的相关点击方法
/** 监听时间插件显示时的事件*/
$('#datetimepicker').datetimepicker({onShow: function(dateText, inst) {console.log("---已打开datetimepicker----");}
}); /** 监听时间插件关闭时的事件 */
$('#datetimepicker').datetimepicker({onClose: function(dateText, inst) {console.log("---已关闭datetimepicker----");}
}); /** 监听点击日期时的事件*/$('#datetimepicker').datetimepicker({onSelectDate: function(dateText, inst) {console.log(dateText);}
}); /** 监听点击时分的事件*/$('#datetimepicker').datetimepicker({onSelectTime: function(dateText, inst) {console.log(dateText);}
}); /** 监听点击datepicker 上一月下一月按钮及选择月份点击事件 */
$('#datetimepicker').datetimepicker({onChangeMonth: function(dateText, inst) {console.log(dateText);}
});
/** 监听获取当前datetimepicker显示的所有日期信息*/
$('#datetimepicker').datetimepicker({onGetWeekOfYear: function(dateText, inst) {console.log(dateText);}
}); /** 监听选择年份的点击事件*/
$('#datetimepicker').datetimepicker({onChangeYear: function(dateText, inst) {console.log(dateText);}
});/** 实时监听你选择的日期和时间*/
$('#datetimepicker').datetimepicker({onChangeDateTime: function(dateText, inst) {console.log(dateText);}
}); /** 实时监听datetimepicker上的所有事件*/
$('#datetimepicker').datetimepicker({onGenerate: function(dateText, inst) {console.log(dateText);}
});
bootstrap datetimepicker 选择月份 选择年
//选择年月日的 startView: 2, minView: 2, format: 'yyyymmdd',
$('#datetimepicker').datetimepicker({format: 'yyyymmdd',weekStart: 1,autoclose: true,startView: 2,minView: 2,forceParse: false,language: 'zh-CN'});//选择年月的 startView: 3, minView: 3, format: 'yyyymm',
$('#datetimepicker').datetimepicker({format: 'yyyymm',weekStart: 1,autoclose: true,startView: 3,minView: 3,forceParse: false,language: 'zh-CN'});//选择年的 startView: 4, minView: 4, format: 'yyyy',
$('#datetimepicker').datetimepicker({format: 'yyyymm',weekStart: 1,autoclose: true,startView: 4,minView: 4,forceParse: false,language: 'zh-CN'});
<div class="col-md-7"> <div class='input-group date form_date' > <input name="startTm" id="datetimepicker" type='text' class="form-control input-sm" readonly="readonly"/> <span class="input-group-addon input-sm"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div>
<div class='input-group date form_date' data-date-format="yyyymmdd"><input name="startTm" id="startTm" type='text' class="form-control input-sm" readonly="readonly" /><span class="input-group-addon input-sm"><span class="glyphicon glyphicon-calendar"></span></span></div><div class="date input-append" id="datetimepicker"><div class="input-group"><input class="form-control input-sm" readonly="readonly" type="text"><span class="add-on input-group-addon"><i class="icon-remove"></i></span><span class="add-on input-group-addon"><i class="icon-th"></i></span></div></div>
Datetimepicker.js用法相关推荐
- html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
- wow.js用法详解
页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意 刚知道wow.js这个插件,之前写的类似滚动时页面效果都是自己用jQuery写的,现在有了插件,开发更加快捷有效 ...
- Require.js用法
require.js用法说明 用法一:先直接引入require.js,在使用data-main引入相应的js文件.例如: <script src="require.js" d ...
- clamp.js用法初窥
众所周知,要实现文本溢出显示省略号可以用text-overflow:ellipsis;但是只能显示单行文本: 多行文本可以用-webkit-line-clamp:n;但是这是webkit的私有属性,只 ...
- Vue.js用法详解(一)更新中~
前 言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...
- iScroll.js 用法参考 (share)
http://www.cnblogs.com/asqq/archive/2012/04/23/2466132.html http://www.nb88.net/Index/p/id/406 http: ...
- dva的用法_dva.js 用法详解:列表展示
这次主要通过在线获取用户数据并且渲染成列表这个案例来演示dva.js. 整个开发流程概括下来应该是: 编写用户列表model(数据模型)-> 编写修改model的方法 -> 编写服务接口 ...
- require.js用法简介
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
- Moment.js 用法
地址:文档 | Moment.js 中文网 安装依赖 npm install moment 使用 import moment from 'moment'//YYYY-MM-DD HH:MM:ss =& ...
最新文章
- php麻将机器人ai算法,高性能麻将AI算法
- 3.1.3 操作系统覆盖技术与交换技术的思想
- 一个漂亮的电子钟,纪念我们逝去的青春(含软硬件资料)
- 一起谈.NET技术,抛砖引玉:我看微软.NET各子技术领域之应用前景
- 信息化与工业化融合的内涵、层次和方向
- Android Mms 数据库
- TypeError: 'str' object is not callable (Python)
- 10.22~10.28一周经典题目整理(meeting,BZOJ4377,POJ3659)
- Python实现汉字人名按拼音或笔画顺序排序
- vue将图片保存到相册_vue 图片下载到本地,图片保存到本地
- 基于python的网络聊天室论文_Python基于Socket实现简单聊天室
- C语言数字图像处理---ZPHOTOENGINE算法库使用
- 详细安装系统镜像Contos图解和常用命令
- 微信小程序/校园社区论坛/微信云开发/云函数
- CTFSHOW web入门 命令执行+文件包含+PHP特性
- 中国芯片自给率激增,芯片库存高企的美国阻止中国发展先进工艺
- python适合做网站吗_零基础学python—做网站
- 在计算机找不到资源管理器,XP资源管理器里找不到文件夹选项的解决方法
- 2023年破产重整投资策略研究报告
- 用CSS来实现一些动画在vue中使用之地球旋转(2)
热门文章
- Python爬虫编程思想(52):使用Beautiful Soup选择子节点
- 2023,开启「线控转向」元年
- Rosalind Java|Inferring mRNA from Protein
- JAVA访问修饰符限制性最高的_问:JAVA中,访问修饰符限制性最高的是protected ( )...
- python 微信群男女比例分析,区域分析,柱状图显示
- 多宽带联网(三) OpenWrt中使用cURL方法编写Shell脚本自动完成网页宽带认证登录(校园网认证登录解决方案) 使用awk命令
- 求知若饥, 虚心若愚
- STM32HAL库学习之路(八):MG90S舵机应用
- 自我设限的跳蚤效应(Flea Effect)
- ESM蛋白质语言模型学习笔记