Date Range Picker时间插件非常不错,主要体现在选择一个时间区间
Posted sweeeper
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Date Range Picker时间插件非常不错,主要体现在选择一个时间区间相关的知识,希望对你有一定的参考价值。
地址: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\'
));
});
以上是关于Date Range Picker时间插件非常不错,主要体现在选择一个时间区间的主要内容,如果未能解决你的问题,请参考以下文章
react react-native 日期插件 m-date-picker / rmc-date-picker的使用
如何使用 date-picker bootstrap4 插件禁用每月 26 日至 30 日以及每个月的星期日
vue知识点---element el-date-picker 插件默认时间属性default-value怎么赋值?
如何更改 react-date-range 包中选择的输入颜色?