真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

amaze-ui中datepicker和datetimepicker注意事項(xiàng)有哪些

這篇文章將為大家詳細(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):

效果圖:

amaze-ui中datepicker和datetimepicker注意事項(xiàng)有哪些

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é)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。


本文題目:amaze-ui中datepicker和datetimepicker注意事項(xiàng)有哪些
分享網(wǎng)址:http://weahome.cn/article/ppedei.html

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部