dateRangePicker插件用法
来源:互联网 发布:创世数据查询 编辑:程序博客网 时间:2024/05/28 15:33
Date Range Picker时间插件非常不错,主要体现在选择一个时间区间,俗称双日历控件
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="moment.js"></script>
- <script type="text/javascript" src="daterangepicker.js"></script>
- <link rel="stylesheet" type="text/css" href="bootstrap.css" />
- <link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />
地址:http://www.daterangepicker.com/
demo地址:http://tamble.github.io/jquery-ui-daterangepicker/#event
api
参数
startDate: (日期对象、实践对象或者字符串)初始开始时间
endDate: (日期对象、实践对象或者字符串) 初始结束时间
minDate: (日期对象、实践对象或者字符串) 可选最早时间
maxDate: (日期对象、实践对象或者字符串) 可选最晚时间
dateLimit: (对象) 选择开始日期和结束日期之间的最大跨度
timeZone: (字符串或数字) 时区,默认为本地时区
showDropdowns: (布尔) 在年月份选择框上面显示可以跳刀特定月份的选择
showWeekNumbers: (布尔) 日历的每周前显示周数
timePicker: (布尔) 是否显示时间选择框
timePickerIncrement: (数字) 步长
timePicker12Hour: (布尔) 使用12小时制替代24小时,并添加AM/PM下拉框选项
timePickerSeconds: (布尔) 时间选择框是否显示秒数
ranges: (对象) 设定预定义日期范围
opens: (字符串: 'left'/'right'/'center')选择相对日期框的相对位置
buttonClasses: (数组) 自定义按钮样式
applyClass: (字符串) 自定义按钮样式(apply/应用)
cancelClass: (字符串) 自定义按钮样式(cancle/取消)
format: (字符串) Date/time 结果时间格式
separator: (字符串) 开始时间和结束时间的分割字符
locale: (对象) 本地化
singleDatePicker: (布尔) 只显示一个时间
parentEl: (string) 容器,缺省为body
》》》》》》初始化插件《《《《《《
$(
'#reportrange'
).daterangepicker(
{
// startDate: moment().startOf('day'),
//endDate: moment(),
//minDate: '01/01/2012', //最小时间
maxDate : moment(),
//最大时间
dateLimit : {
days : 30
},
//起止时间的最大间隔
showDropdowns :
true
,
showWeekNumbers :
false
,
//是否显示第几周
timePicker :
true
,
//是否显示小时和分钟
timePickerIncrement : 60,
//时间的增量,单位为分钟
timePicker12Hour :
false
,
//是否使用12小时制来显示时间
ranges : {
//'最近1小时': [moment().subtract('hours',1), moment()],
'今日'
: [moment().startOf(
'day'
), moment()],
'昨日'
: [moment().subtract(
'days'
, 1).startOf(
'day'
), moment().subtract(
'days'
, 1).endOf(
'day'
)],
'最近7日'
: [moment().subtract(
'days'
, 6), moment()],
'最近30日'
: [moment().subtract(
'days'
, 29), moment()]
},
opens :
'right'
,
//日期选择框的弹出位置
buttonClasses : [
'btn btn-default'
],
applyClass :
'btn-small btn-primary blue'
,
cancelClass :
'btn-small'
,
format :
'YYYY-MM-DD HH:mm:ss'
,
//控件中from和to 显示的日期格式
separator :
' to '
,
locale : {
applyLabel :
'确定'
,
cancelLabel :
'取消'
,
fromLabel :
'起始时间'
,
toLabel :
'结束时间'
,
customRangeLabel :
'自定义'
,
daysOfWeek : [
'日'
,
'一'
,
'二'
,
'三'
,
'四'
,
'五'
,
'六'
],
monthNames : [
'一月'
,
'二月'
,
'三月'
,
'四月'
,
'五月'
,
'六月'
,
'七月'
,
'八月'
,
'九月'
,
'十月'
,
'十一月'
,
'十二月'
],
firstDay : 1
}
},
function
(start, end, label) {
//格式化日期显示框
$(
'#reportrange span'
).html(start.format(
'YYYY-MM-DD HH:mm:ss'
) +
' - '
+ end.format(
'YYYY-MM-DD HH:mm:ss'
));
});
- dateRangePicker插件用法
- bootstrap时间插件daterangepicker
- jQuery dateRangePicker插件使用总结
- bootstrap-daterangepicker-master相关用法
- daterangepicker
- bootstrap日期插件daterangepicker的使用
- Angular的daterangepicker日历插件常用配置
- bootstrap日期插件daterangepicker的使用
- bootstrap日期插件daterangepicker的使用
- jquery双日历插件daterangepicker.js设置成单日历
- jquery双日历插件daterangepicker.js使用方法及设置值
- jquery双日历插件daterangepicker.js设置渲染位置parentEl
- 日期时间范围选择插件-daterangepicker使用总结
- daterangepicker 示例
- daterangepicker 问题
- jquery双日历插件daterangepicker.js设置可选时间时分秒
- 时间段插件daterangepicker —— 基本使用及回显问题解决方法
- MVC4 使用 bootstrap daterangepicker
- MP3文件结构(1)
- http与https
- JavaScript继承模式
- 浅析python 中__name__ = '__main__' 的作用
- Centos7下安装Tahoe-LAFS
- dateRangePicker插件用法
- Mybatis-generator修改源代码实现自定义方法,返回List对象(二)
- Android开发笔记(一百四十九)约束布局ConstraintLayout
- Android Service学习笔记--Service知识概要
- shell 编程实例学习
- JAVA面试,最起码,你应该知道这些
- Matlab符号计算求导与化简
- Spring IoC 学习(3)
- 网易2018笔试题三