bootstrap --datetimepicker之时间段选择

文件引入

   
   
   
   
   
   

HTML：

<label>
    <input type='text' class='form-control ' id='dateBegin' name='date_begin' placeholder="beginTime..." value='' ng-model="dateBegin">
label>
---
<label>
    <input type='text' class='form-control ' id='dateEnd' name='date_begin' placeholder="endTime..." value='' ng-model="dateEnd">
label>

JS：

function DatePicker(beginSelector,endSelector){
    $(beginSelector).datetimepicker(
        {
            language:  'zh-CN', // 语言选择中文
            autoclose: true,
            startView: 'month', // 进来是月
            minView: 'hour',// 可以看到小时
            minuteStep:1, //分钟间隔为1分
            format: 'yyyy-mm-dd hh:ii:ss',// 年月日时分秒
            clearBtn:false,
            todayBtn:true,
            endDate:new Date()
        }).on('changeDate', function(ev){
        if(ev.date){
            $(endSelector).datetimepicker('setStartDate', new Date(ev.date.valueOf()))
        }else{
            $(endSelector).datetimepicker('setStartDate',null);
        }
    })

    $(endSelector).datetimepicker(
        {
            language:  "zh-CN",
            autoclose: true,
            minView: "hour",
            minuteStep:1,
            startView:'month',
            format: "yyyy-mm-dd hh:ii:ss",
            clearBtn:true,
            todayBtn:false,
            endDate:new Date()
        }).on('changeDate', function(ev){
        if(ev.date){
            $(beginSelector).datetimepicker('setEndDate', new Date(ev.date.valueOf()))
        }else{
            $(beginSelector).datetimepicker('setEndDate',new Date());
        }

    })
}
DatePicker("#dateBegin","#dateEnd");

效果图