這篇文章將為大家詳細(xì)講解有關(guān)amaze-ui中datepicker和datetimepicker注意事項(xiàng)有哪些,小編覺得挺實(shí)用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)公司主營黃石網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),黃石h5微信小程序定制開發(fā)搭建,黃石網(wǎng)站營銷推廣歡迎黃石等地區(qū)企業(yè)咨詢
點(diǎn)1:參考文檔不能選錯,amaze的默認(rèn)文檔是http://amazeui.shopxo.net/getting-started/,但是當(dāng)我們要使用datetimepicker是就要使用https://github.com/amazeui/datetimepicker,
這就是我想吐槽的地方了,amaze竟然把datetimepicker放在一個不起眼的小角落里,這是大家需要注意的地方。
點(diǎn)2:amaze-ui的日期時間插件是真的不好看,可擴(kuò)展性不太好,特別是在對時間進(jìn)行控制的時候很麻煩。在我們的項(xiàng)目中能不用這個堅(jiān)決不用,我這一次是在別人用了之后才使用這個的,
后來發(fā)現(xiàn)真費(fèi)勁。
點(diǎn)3:三時間(datetimepicker)校驗(yàn):
效果圖:
jsp關(guān)鍵代碼:
制卡時間生效時間過期時間
js校驗(yàn)代碼:
為了使大家看的清楚,這里我使用一種比較巧妙的手法,因?yàn)槭侨掌谛r?yàn),設(shè)置開始時間參數(shù)只能是setStartTime,設(shè)置結(jié)束參數(shù)只能是setEndTime,所以不能在jq的入口函數(shù)進(jìn)行初始化工作,需要在jq的入口函數(shù)中調(diào)用兩個函數(shù)進(jìn)行初始化,代碼如下:
initDatePicker = function () { //日期插件初始化 $('#gender').datetimepicker({ language: 'zh-CN', format: 'yyyy-mm-dd hh:ii:ss', minView: 2 //pickerPosition: "bottom-left" }).on("changeDate", function (ev) { //值改變事件 if (ev.date) { $("#startDate").datetimepicker('setStartDate', new Date(ev.date.valueOf())); } else { $("#startDate").datetimepicker('setStartDate', null); } }); $('#startDate').datetimepicker({ language: 'zh-CN', format: 'yyyy-mm-dd hh:ii:ss', minView: 2 //pickerPosition: "bottom-left" }).on("changeDate", function (ev) { if (ev.date) { $("#gender").datetimepicker('setEndDate', new Date(ev.date.valueOf())); } else { $("#gender").datetimepicker('setEndDate', new Date()); } }); $('#gender,#startDate').click(function () { $(this).datetimepicker("show"); }) }; initDatePicker1 = function () { $('#startDate').datetimepicker({ language: 'zh-CN', format: 'yyyy-mm-dd hh:ii:ss', minView: 2 //pickerPosition: "bottom-left" }).on("changeDate", function (ev) { if (ev.date) { $("#expDate").datetimepicker('setStartDate', new Date(ev.date.valueOf())); } else { $("#expDate").datetimepicker('setStartDate', new Date()); } }); $('#expDate').datetimepicker({ language: 'zh-CN', format: 'yyyy-mm-dd hh:ii:ss', minView: 2 //pickerPosition: "bottom-left" }).on("changeDate", function (ev) { if (ev.date) { $("#startDate").datetimepicker('setEndDate', new Date(ev.date.valueOf())); } else { $("#startDate").datetimepicker('setEndDate', null); } }); $('#startDate,#expDate').click(function () { $(this).datetimepicker("show"); }) }
注意datetimepicker中的minView的用法,它是控制插件的最小顯示顯示視圖,minView=2表示最小的選擇是多好號,沒有時間的選擇了,默認(rèn)情況是選擇到秒的;而datepicker中對應(yīng)的設(shè)置是minViewMode,這里就把我坑了一次。
最后進(jìn)行補(bǔ)充,在開發(fā)中如果用amaze的時間插件,我建議統(tǒng)一使用datetimepicker,他相對datepicker更具通用性,在時間范圍的控制上更靈活,我們只需使用minView進(jìn)行控制最小顯示就行。
關(guān)于“amaze-ui中datepicker和datetimepicker注意事項(xiàng)有哪些”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。