laydate的使用

在layui的文檔中,對(duì)laydate的使用提供了簡(jiǎn)單的代碼示例:

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        
        //執(zhí)行一個(gè)laydate實(shí)例
        laydate.render({
            elem: '#test1' //指定元素
        });
    });
</script>

重點(diǎn)是laydate對(duì)象的render方法配以配置對(duì)象進(jìn)行控件的渲染。

但實(shí)際使用過(guò)程中需要對(duì)組件進(jìn)行【時(shí)間】賦值操作。每次粘貼上述代碼很low,因此封裝如下:

  1. 將laydate對(duì)象的引用讓頁(yè)面的vm對(duì)象持有
  2. 在需要賦值的地方,調(diào)用vm.laydate.render()方法
  3. 步驟2的方法參數(shù)由下面的兩種方法獲取。
/**
 * 獲取時(shí)間選擇控件的渲染配置對(duì)象
 * @param ele 時(shí)間選擇控件掛載的html元素
 * @param initValue 時(shí)間選擇控件初始值,Date類型的對(duì)象,可以為null
 * @param callback 用戶在選擇時(shí)間后,將執(zhí)行的方法
 */
function getLaydateOptions(ele, initValue, callback) {
    return {
        elem: ele,//指定元素
        type: 'datetime',
        format: 'yyyy-MM-dd HH:mm:ss',
        value: initValue,
        done: function (value, date, endDate) {
            if (callback != null && callback != undefined) {
                callback(value);
            }
        }
    };
}

?/**
 * 獲取時(shí)間選擇控件的渲染配置對(duì)象
 * @param ele 時(shí)間選擇控件掛載的html元素
 * @param initValue 時(shí)間選擇控件初始值,Date類型的對(duì)象,可以為null
 * @param valueReceiver 用戶在選擇時(shí)間后,存儲(chǔ)該值的引用的變量名,是字符串類型
 */
function getLaydateOptions(ele, initValue, valueReceiver) {
    return {
        elem: ele,//指定元素
        type: 'datetime',
        format: 'yyyy-MM-dd HH:mm:ss',
        value: initValue,
        done: function (value, date, endDate) {
            eval(valueReceiver + " = '" + value + "';");
        }
    };
}

vm.laydate.render(getLaydateOptions('#beginTime', now, "vm.timeSelectValueForFrom.beginTime"));

第二種方法是自己新掌握的,以此記之,繼續(xù)加油。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容