文件引入
<script type="text/javascript" src="css/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="dist/js/bootstrap-datetimepicker.js"></script>
<script src="dist/js/bootstrap-datetimepicker.zh-CN.js"></script>
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");
效果圖
原文：https://blog.csdn.net/qq_38643776/article/details/80851887