今天就跟大家聊聊有關(guān)如何在angular項(xiàng)目中使用bootstrap-datetimepicker時(shí)間插件,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)公司是專業(yè)的南海網(wǎng)站建設(shè)公司,南海接單;提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行南海網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
一、需求:
后臺(tái)系統(tǒng)中經(jīng)常會(huì)使用到的功能,選擇一個(gè)時(shí)間區(qū)間,根據(jù)這個(gè)時(shí)間區(qū)間去篩選一些信息,比如,某一時(shí)間段的注冊(cè)用戶。
二、最后效果
三、需要引入的文件(src/index.html)
注意:1、jQuery文件先引用,因?yàn)樵诔跏蓟掌诓寮?,需要找到DOM中的對(duì)象,添加一些樣式;
2、可以看到,我項(xiàng)目中并沒(méi)有引用bootstrap.min.css這個(gè)文件,因?yàn)槭窃趇ndex.html全局引用的這個(gè)樣式,對(duì)已經(jīng)寫好的樣式有很大的影響,因此產(chǎn)生的影響就是樣式是亂掉的,你看到的效果圖(第一張圖片)的樣式就需要自己動(dòng)手啦,寫一個(gè)共用的樣式,在每個(gè)組件中引用。
具體樣式就不加了,相信如果你引用插件的這個(gè)坑淌過(guò)來(lái)了,這點(diǎn)兒小事兒,就想一顆奶油巧克力,帶著成就感慢慢‘品嘗'吧~
四、代碼部分
A、 To Date
(html代碼)
JS代碼
//初始化日期插件 -- 選擇到天 $('#startTime').datetimepicker({ format: 'yyyy-mm-dd',//顯示格式 todayHighlight: 1,//今天高亮 minView: "month",//設(shè)置只顯示到月份 startView:2, forceParse: 0, showMeridian: 1, autoclose: true,//選擇后自動(dòng)關(guān)閉 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",//設(shè)置只顯示到月份 startView:2, forceParse: 0, showMeridian: 1, autoclose: true,//選擇后自動(dòng)關(guān)閉 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這個(gè)參數(shù)可以設(shè)置日期的格式,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()); });
看完上述內(nèi)容,你們對(duì)如何在angular項(xiàng)目中使用bootstrap-datetimepicker時(shí)間插件有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。