本文主要为大家详细介绍了jquery daterangepicker插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
jquery daterangepicker插件使用总结。
版本说明：
当前使用版本：2.1.25
特别说明：版本不同，部分api可能会发生变化，需要引起重点关注
效果图
关键代码片段
$("#datetimerange span").html(moment().subtract(1, 'hours').format('yyyy-mm-dd hh:mm') + '~' + moment().format('yyyy-mm-dd hh:mm'));
$("#datetimerange").daterangepicker({
maxdate : moment(), //最大时间
datelimit : {
days : 30
}, //起止时间的最大间隔
showdropdowns : true,
showweeknumbers : false, //是否显示第几周
timepicker : true, //是否显示小时和分钟
timepickerincrement : 60, //时间的增量，单位为分钟
timepicker12hour : false, //是否使用12小时制来显示时间
ranges : {
'最近1小时': [moment().subtract(1, 'hours'), moment()],
'今日': [moment().startof('day'), moment()],
'昨日': [moment().subtract(1, 'days').startof('day'), moment().subtract(1, 'days').endof('day')],
'最近7日': [moment().subtract(6, 'days'), moment()],
'最近30日': [moment().subtract(29, 'days'), moment()]
},
opens : 'right', //日期选择框的弹出位置
buttonclasses : ['btn btn-default'],
applyclass : 'btn-small btn-primary blue',
cancelclass : 'btn-small',
locale : {
applylabel : '确定',
cancellabel : '取消',
fromlabel : '起始时间',
tolabel : '结束时间',
customrangelabel : '自定义',
daysofweek : [ '日', '一', '二', '三', '四', '五', '六' ],
monthnames : [ '一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月' ],
firstday : 1
}
}, function(start, end, label) {
// 格式化日期显示框
$("#datetimerange span").html(start.subtract(1, 'hours').format('yyyy-mm-dd hh:mm') + '~' + end.format('yyyy-mm-dd hh:mm'));
});
html:
<p class="inline">
<label>时间段:</label>
<p class="date-picker form-inline-control" id="datetimerange">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span id="searchdaterange"></span>
<b class="caret"></b>
</p>
</p>
相关推荐：
关于日期时间范围选择插件:daterangepicker使用总结
jquery ui 日期选择器datepicker详解
实例分享jquery实现简单日期格式化功能
以上就是实例详解jquery daterangepicker插件使用方法的详细内容。