Bootstarp daterangepicker 日期控件

$(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>
相關文章
相關標籤/搜索