SOURCE

//默认设置
$('#timePicker1').bhTimePicker();

//固定宽度
$('#timePicker2').bhTimePicker({
    width: 300
});

//设定默认选择类型
//可选类型: custom:自定义, all:全部, currentWeek:本周, lastWeek:上周
//currentMonth:本月, lastMonth: 上月, currentQuarter:本季度, lastQuarter:上季度
//currentYear:今年, lastYear:去年, last7Day:近7天, last30Day:近30天
$('#timePicker3').bhTimePicker({
    defaultType: 'all'
});

//设定可选范围从2015/2/5到今天
$('#timePicker4').bhTimePicker({
    range: {
       max: 'today',
       min: '2015/02/05'
    }
});

//设定初始值从2015/03/05到2015/06/01
$('#timePicker5').bhTimePicker({
    time:{
        start: '2015/03/05',
        end: '2015/06/01'
    }
});

//时间切换后有回调
$('#timePicker6').bhTimePicker({
    selectedTime: function(startTime, endTime){
        $('mark').html('startTime 开始时间:'+startTime+',endTime结束时间:'+endTime);
    }
});

//设定选择年月
$('#timePickerYearAndMonth').bhTimePicker({
    format: 'YYYY-MM'
});

//该控件可被删除
$('#removeTimePicker').bhTimePicker();

$('div.e2e-opt').on('click', 'button', function () {
    var action = $(this).attr('data-action');
    switch (action) {
        //没有页脚的弹框
        case "getRangeTime":
            var dateTime = $('#timePicker1').bhTimePicker('getValue');
            $('mark').html('startTime='+dateTime.startTime +', endTime='+dateTime.endTime);
            break;
        case "setRangeTime":
            $('#timePicker1').bhTimePicker('setValue',{
                startTime: '2016-8-24',
                endTime: '2017-9-24'
            });
            break;
        case "setRangeTimeDisable":
            $('#timePicker1').bhTimePicker('setDisable');
            break;
        case "setRangeTimeEnable":
            $('#timePicker1').bhTimePicker('setEnable');
            break;
        case "remove":
            $('#removeTimePicker').bhTimePicker('remove');
            break;
    }
});

<div class="e2e-opt">
    <button data-action="getRangeTime">获取第一个时间范围的时间</button>
    <button data-action="setRangeTime">设置第一个时间范围的时间,起始时间是2016-8-24,结束时间是2017-9-24</button>
    <button data-action="setRangeTimeDisable">设置第一个时间范围的时间禁用</button>
    <button data-action="setRangeTimeEnable">设置第一个时间范围的时间禁用给恢复</button>
    <button data-action="remove">删除最后一个时间范围控件</button>
</div>

<mark>
    返回状态
</mark>

<div class="bh-row">
    <div class="bh-col-md-6">
        <div>默认设置</div>
        <div id="timePicker1"></div>
    </div>
    <div class="bh-col-md-6">
        <div>固定宽度300px</div>
        <div id="timePicker2"></div>
    </div>
    <div class="bh-col-md-6">
        <div>设定默认选择类型是"全部"</div>
        <div id="timePicker3"></div>
    </div>
</div>

<div class="bh-row" style="margin-top: 50px;">
    <div class="bh-col-md-6">
        <div>设定可选范围从2015/2/5到今天</div>
        <div id="timePicker4"></div>
    </div>
    <div class="bh-col-md-6">
        <div>设定初始值从2015/03/05到2015/06/01</div>
        <div id="timePicker5"></div>
    </div>
    <div class="bh-col-md-6">
        <div>时间切换后有回调</div>
        <div id="timePicker6"></div>
    </div>
</div>

<div class="bh-row" style="margin-top: 50px;">
    <div class="bh-col-md-6">
        <div>设定选择年月类型</div>
        <div id="timePickerYearAndMonth"></div>
    </div>
    <div class="bh-col-md-6">
        <div>该控件可被删除</div>
        <div id="removeTimePicker"></div>
    </div>
</div>