dateRangePicker时间范围控件
Github:https://github.com/dangrossman/bootstrap-daterangepicker/
使用daterangepicker()为元素创建一个时间范围控件
<script type="text/javascript">
$(document).ready(function(){
$('input[name="daterange"]').daterangepicker();
});
</script>
daterangepicker()还可以有个操作对象参数和回调函数。当用户选择时间范围后调用回调函数,参数是monent时间对象的开始时间、结束时间、预定义的范围标签选择。
$('input[name="daterange"]').daterangepicker(
{
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: '2013-12-31'
},
function(start, end, label) {
alert('A date range was chosen: ' +start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
}
);
参数
`startDate`: (Date object, moment object or string) 起始时间
`endDate`: (Date object, moment object or string) 结束时间
`minDate`: (Date object, moment object or string) 可选最早时间
`maxDate`: (Date object, moment object or string) 可选最迟时间
`timePicker`: (boolean) 是否显示time选择
`timePickerIncrement`: (number) time选择递增数
`timePicker12Hour`: (boolean) 是否12小时制
`opens`: (string: 'left'/'right') 显示在元素左边还是右边
`buttonClasses`: (array) 按钮样式
`applyClass`: (string) 应用按钮样式
`cancelClass`: (string) 取消按钮样式
`format`: (string) date/time格式
`separator`: (string) 分隔符
`locale`: (object) 本地设置
`singleDatePicker`: (boolean) 是否是单个时间选择器
`parentEl`: (string) 将控件放到哪个元素内,默认body函数方法
函数方法
`setOptions(object,function)`: 设置操作
`setStartDate(Date/moment/string)`:设置起始时间
`setEndDate(Date/moment/string)`:设置结束时间
事件
`show.daterangepicker`:Triggered when the picker is shown
`hide.daterangepicker`:Triggered when the picker is hidden
`apply.daterangepicker`:Triggered when the apply button is clicked
`cancel.daterangepicker`:Triggered when the cancel button is clicked
dateRangePicker时间范围控件的更多相关文章
- BootStrap dateRangePicker时间范围控件
BootStrap dateRangePicker时间范围控件 1 安装引用 1.1 下载zip Github:https://github.com/dangrossman/bootstrap-dat ...
- bootstrap的时间控件使用(双日历)
这段时间看了下bootstrap的时间控件,发现使用起来还是很简单的,趁着有时间的时候整理了一下,方便自己以后忘记的时候查阅... 废话不多说先上效果图 接下来是代码实现 第一步当然是导入css.js ...
- 双日历时间段选择控件—daterangepicker(汉化版)
daterangepicker的配置信息,记录下来方便设置: <pre name="code" class="html"><pre name= ...
- layer过去的时间不能选择,只能选择未来的时间 LayUI中的时间日期控件,设置时间范围,
默认Layui中的时间控件显示如下: 我当时系统时间是2018-06-07, 我需要做的是2018-06-07之后过去的时间不能选择 <p><span>时间范围:</sp ...
- bootstrap之双日历时间段选择控件—daterangepicker(汉化版)
jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...
- 学习日期时间控件 daterangepicker
aterangepicker 是一款日期时间控件,可选择“年,月,日,时,分,秒”,可选择单面板,也可选择双面板(起止时间). 单面板示例:daterangepicker 单面板 codepen 在线 ...
- Element-UI饿了么时间组件控件按月份周日期,开始时间结束时间范围限制参数
在日常开发中,我们会遇到一些情况,在使用Element-UI 限制用户的日期时间范围的选择控制(例如:查询消息开始和结束时间,需要限制不能选择今天之后的时间). 看了网上的一些文档,零零散散.各式各样 ...
- layui时间控件联动:开始时间、结束时间,有效时间范围
实际开发中,经常遇到时间控件联动的情况,然后每次都网上搜代码Copy,不过每次都有点小Bug让你错不及防: 这次,在这里备份一下,以后Copy自己的得了(欢迎Copy代码,若遇到问题,请麻烦回复我一下 ...
- 好用的日期控件jeDate
最近做公司后台系统关于仓库的一些东西,需要根据时间范围来导出一些数据,我们使用的后台框架是基于bs的,bs也有时间控件:bootstrap-datepicker是只能选择日期的, daterangep ...
随机推荐
- PHP 原型模式
原型模式:原型模式是先创建好一个原型对象,然后通过拷贝原型对象来创建新的对象.适用于大对象的创建,因为创建一个大对象需要很大的开销,如果每次new就会消耗很大,原型模式仅需内存拷贝即可.也可以用作动态 ...
- 几句话就能让你理解:this、闭包、原型链
以下是个人对这三个老大难的总结(最近一直在学习原生JS,翻了不少书,不少文档,虽然还是新手,但我会继续坚持走我自己的路) 原型链 所有对象都是基于Object.prototype,Object.pro ...
- 如何利用FineReport制作动态树报表
在对数据字段进行分类管理时,利用动态树折叠数据是一个很好的方法,也就是点击数据前面的加号才展开对应下面的数据,如下图.那这样的效果在制作报表时该如何实现呢? 下面以报表工具FineReport为例介绍 ...
- iOS 语音朗读
//判断版本大于7.0 if ([[[UIDevice currentDevice] systemVersion] integerValue] >= 7.0) { NSStr ...
- JDWP Agent
JDWP Agent Implementation Description Revision History Disclaimer 1. About this Document 1.1 Purpose ...
- 使用InstallAnywhere工具打包Java_Web程序
一.准备工作 1. 下载InstallAnywhere,并安装: 2. 下载解压版jdk1.7(示例为jdk1.7.0_75): 3. 下载解压版tomcat7.0以上版本(示例 ...
- linux基本知识1
ls命令: -l:长格式 文件类型:第1位 -:普通文件 d:目录文件 b:块设备文件(block) c:字符设备文件(character) l:符号链接文件(symbolic link file) ...
- [总结] Versions crashing in OS X Yosemite (10.10)
在文本编辑器中打开 ~/.subversion/servers 在 [global] 下添加该行: http-library = serf 然后,安装 Versions 1.3.2
- Django 前后台的数据传递
Django 从后台往前台传递数据时有多种方法可以实现. 最简单的后台是这样的: from django.shortcuts import render def main_page(request): ...
- css实现页面元素居中
水平居中 对于已知宽度的块级元素实现水平居中只需要设置 margin-left:auto; margin-right:auto; 对于多个块级元素实现水平居中只需要设置 //1 父类{ text-al ...