探讨amaz⊙ω⊙e

2021-01-20 23:43 jianzhan

点1:参照文本文档不可以弄错,amaze的默认设置文本文档是http://amazeui.shopxo.net/getting-started/,可是当我们们要应用datetimepicker是就需要应用https://github.com/amazeui/datetimepicker,
就是我想调侃的地区了,amaze居然把datetimepicker放到一个不了眼的小角落里里,它是大伙儿必须留意的地区。

点2:amaze-ui的时间時间软件是确实不太好看,扩展性不大好,非常是在对時间开展操纵的情况下很不便。在大家的新项目里能无需这一果断无需,我这一次是在他人用了以后才应用这一的,
之后发觉真费力。

点3:三時间(datetimepicker)校检:

实际效果图:

jsp重要编码:

<div class="inputItem">
    <div class="inputName">制卡時间</div>
     <input type="text" id="gender" name="gender" class="am-form-field data-input" readonly required placeholder="挑选">
 </div>
 <div class="inputItem">
     <div class="inputName">起效時间</div>
     <input type="text" id="startDate" name="startDate" class="am-form-field data-input" readonly required placeholder="挑选">
 </div>
 <div class="inputItem">
     <div class="inputName">到期時间</div>
     <input type="text" id="expDate" name="expDate" class="am-form-field data-input" readonly required placeholder="挑选">
 </div>

js校检编码:
以便使大伙儿看的清晰,这儿我应用一种较为恰当的技巧,由于是三时间校检,设定刚开始時间主要参数只有是setStartTime,设定完毕主要参数只有是setEndTime,因此不可以在jq的通道涵数开展原始化工厂作,必须在jq的通道涵数中启用2个涵数开展原始化,编码以下:

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表明最少的挑选是多么好号,沒有時间的挑选了,默认设置状况是挑选到秒的;而datepicker中相匹配的设定是minViewMode,这儿就将我坑了一次。

最终开展填补,在开发设计中假如用amaze的時间软件,我提议统一应用datetimepicker,他相对性datepicker更具有通用性性,在時间范畴的操纵上更灵便,大家只需应用minView开展操纵最少显示信息就可以了。

到此这篇有关探讨amaze-ui中datepicker和datetimepicker留意的几个方面的文章内容就详细介绍到这了,大量有关amaze-ui中datepicker和datetimepicker內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!