daterangepicker是一個配合bootstrap框架使用的時間范圍選擇js組件古今，可以選擇起始時間，可以自定義時間段滔以。
1捉腥、引入js和css：
<link href="bootstrap.min.css">
<link href="daterangepicker-bs3.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="moment.min.js"></script>
<script src="daterangepicker.js"></script>
2、html
<div class="input-group">
<span class="input-group-addon">注冊時間</span>
<input type="text" class="form-control daterange" style="min-width:200px;">
</div>
3你画、js
$('#id').daterangepicker({
//startDate: moment().startOf('day'),
//endDate: moment(),
//minDate: '01/01/2017', //最小時間
//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', //控件中from和to 顯示的日期格式
//separator: ' - ', //from和to 中間分隔符
locale: { //漢化
applyLabel: '確定',
cancelLabel: '取消',
fromLabel: '起始時間',
toLabel: '結(jié)束時間',
customRangeLabel: '自定義',
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'],
firstDay: 1
}
}, function (start, end, label) {//格式化日期顯示框，默認(rèn)MM/DD/YYYY
$('#id').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
});
4坏匪、效果圖
daterangepicker.png
歡迎評論指正拟逮，轉(zhuǎn)載請標(biāo)明出處。
