Bootstrap-daterangepicker插件是一款非常方便的日期插件，风格简单，但是因为配置说明很少，用的时候难免会麻烦一些。我在使用过程用用到一个开始时间和结束时间，配置好后，发现daterangepicker插件选择年和月的时候只能左右按钮点击进行选择 ，很是不方便，我今天来告诉大家一个可以直接选择年月的配置。
 
刚开始配置时，此时不能单独选择垮年和跨月





 
修改后可以选择垮年垮月单独选择





 
不多说直接上配置代码<div class="input-prepend input-group">
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input type="text" readonly="" style="width: 200px" name="reservation" id="reservation" class="form-control active" value="2017-7-25 - 2017-7-25">
</div>
<script>
$(function (){
$('#reservation').daterangepicker({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 : ' to ',
showDropdowns: true,//这个才是关键，开启后可以单独选择年月
locale : {
applyLabel : '确定',
cancelLabel : '取消',
fromLabel : '起始时间',
toLabel : '结束时间',
customRangeLabel : '自定义',
daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月' ],
firstDay : 1
}}, function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});
})
</script>
 
 
 
 
 
  查看全部

<div class="input-prepend input-group">

    <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input type="text" readonly="" style="width: 200px" name="reservation" id="reservation" class="form-control active" value="2017-7-25 - 2017-7-25">

</div>

<script>

$(function (){

    $('#reservation').daterangepicker({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 : ' to ',

            showDropdowns: true,//这个才是关键，开启后可以单独选择年月

            locale : {

                applyLabel : '确定',

                cancelLabel : '取消',

                fromLabel : '起始时间',

                toLabel : '结束时间',

                customRangeLabel : '自定义',

                daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],

                monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',

                    '七月', '八月', '九月', '十月', '十一月', '十二月' ],

                firstDay : 1

            }}, function(start, end, label) {

            console.log(start.toISOString(), end.toISOString(), label);

        });

})

</script>