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\'));
               });
 
转自:http://www.cnblogs.com/shiyou00/p/5512678.html

以上是关于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 包中选择的输入颜色?

黄聪:JQUERY的datatables插件,Date range filter时间段筛选功能

微信小程序日期插件封装-年月日时,只可选当前时间之后时间