這篇文章主要介紹了angular專案中bootstrap-datetimepicker時間插件的使用範例,現在分享給大家，也給大家做個參考。
一、需求：
後台系統中常會使用到的功能，選擇一個時間區間，根據這個時間區間去篩選一些訊息，比如，某一時段的註冊用戶。
二、最後效果
#三、需要引進的檔案（src/index.html）
注意：1、jQuery檔案先引用，因為在初始化日期插件是，需要找到DOM中的對象，加入一些樣式；
2、可以看到，我專案中並沒有引用bootstrap.min.css這個文件，因為是在index.html全域引用的這個樣式，對已經寫好的樣式有很大的影響，因此產生的影響就是樣式是亂掉的，你看到的效果圖（第一張圖片）的樣式就需要自己動手啦，寫一個共用的樣式，在每個組件中引用。
具體樣式就不加了，相信如果你引用插件的這個坑淌過來了，這點兒小事兒，就想一顆奶油巧克力，帶著成就感慢慢'品嚐'吧~
四、程式碼部分
A、 To Date
#（html程式碼）
JS程式碼
//初始化日期插件 -- 选择到天
$('#startTime').datetimepicker({
format: 'yyyy-mm-dd',//显示格式
todayHighlight: 1,//今天高亮
minView: "month",//设置只显示到月份
startView:2,
forceParse: 0,
showMeridian: 1,
autoclose: true,//选择后自动关闭
language: 'zh-CN',
weekStart: 1,
// todayBtn: 1,
// autoclose: 1,
// todayHighlight: 1,
// startView: 2,
// minView: 2,
// forceParse: 0,
// pickerPosition:'bottom-right'//日期插件弹出的位置
}).on("changeDate", function () {
$('#endTime').datetimepicker('setStartDate', $("#startTime").val());
console.log( $("#startTime").val());
$("#endTime").focus()
});
$('#endTime').datetimepicker({
format: 'yyyy-mm-dd',//显示格式
todayHighlight: 1,//今天高亮
minView: "month",//设置只显示到月份
startView:2,
forceParse: 0,
showMeridian: 1,
autoclose: true,//选择后自动关闭
language: 'zh-CN',
weekStart: 1,
// todayBtn: 1,
// autoclose: 1,
// todayHighlight: 1,
// startView: 2,
// minView: 2,
// forceParse: 0,
// pickerPosition:'bottom-right'//日期插件弹出的位置
}).on("changeDate", function () {
$('#startTime').datetimepicker('setEndDate', $("#endTime").val());
console.log( $("#endTime").val());
});format這個參數可以設定日期的格式，yyyy-mm-dd，yyyy/mm/dd
B、To Minute
(html代碼)
(JS代碼)
// //初始化日期插件 -- 选择到分钟
$('#startTimeMinute').datetimepicker({
//language: 'fr',
format: 'yyyy-mm-dd hh:ii',//显示格式
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
}).on("changeDate", function () {
$('#endTimeMinute').datetimepicker('setStartDate', $("#startTimeMinute").val());
console.log( $("#startTimeMinute").val());
$("#endTimeMinute").focus()
});
$('#endTimeMinute').datetimepicker({
//language: 'fr',
format: 'yyyy-mm-dd hh:ii',//显示格式
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
}).on("changeDate", function () {
$('#startTimeMinute').datetimepicker('setEndDate', $("#endTimeMinute").val());
console.log( $("#endTimeMinute").val());
});注意：因為是一個時間區間，第一個input是開始時間，第二個是結束時間，開始時間必須在結束時間之前，因此，id必須加在input上，而不是p上。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
#以上是angular專案中bootstrap-datetimepicker時間插件的使用範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
