$(function(){ $('.dateTimeRange').daterangepicker({ startDate: moment().subtract(7, 'days'), endDate: moment().subtract(1, 'days'), maxDate : moment(), //最大時間 dateLimit : { days : 600 }, //起止時間的最大間隔 showDropdowns : true, showWeekNumbers : false, //是否顯示第幾周 timePicker : false, //是否顯示小時和分鐘 timePickerIncrement : 10, //時間的增量,單位爲分鐘 timePicker12Hour : false, //是否使用12小時制來顯示時間 ranges : { '今日': [moment().startOf('day'), moment()], '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')], '最近7日': [moment().subtract('days', 7).startOf('day'), moment().subtract('days', 1).endOf('day')], '最近30日': [moment().subtract('days',30).startOf('day'), moment().subtract('days', 1).endOf('day')] }, opens : 'auto', //日期選擇框的彈出位置 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" : { "format": 'YYYY-MM-DD', applyLabel : '肯定', cancelLabel : '取消', fromLabel : '起始時間', toLabel : '結束時間', customRangeLabel : '自定義', daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ], monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay : 1 } }, function(start, end, label) {//格式化日期顯示框 $('#dateTimeRange span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD')); } ); });
<div class="form-group" style="margin:5px 0;"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-calendar"></i> </span> <input type="text" style="width:200px" class="form-control dateTimeRange"> </div> <!-- <label for="phone" class="col-md-2 control-label no-padding-right">日期:</label> --> <!-- <div class="col-md-10"> --> <!-- <div class="controls"> --> <!-- <div id="reportrange" class="pull-left dateRange" style="width:200px"> --> <!-- <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> --> <!-- <input id="searchDateRange" class="form-control"/> --> <!-- <b class="caret"></b> --> <!-- </div> --> <!-- </div> --> <!-- </div> --> </div>