laydate的使用

在layui的文档中，对laydate的使用提供了简单的代码示例：

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        
        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
        });
    });
</script>

重点是laydate对象的render方法配以配置对象进行控件的渲染。

但实际使用过程中需要对组件进行【时间】赋值操作。每次粘贴上述代码很low，因此封装如下：

1. 将laydate对象的引用让页面的vm对象持有
2. 在需要赋值的地方，调用vm.laydate.render()方法
3. 步骤2的方法参数由下面的两种方法获取。

/**
 * 获取时间选择控件的渲染配置对象
 * @param ele 时间选择控件挂载的html元素
 * @param initValue 时间选择控件初始值，Date类型的对象，可以为null
 * @param callback 用户在选择时间后，将执行的方法
 */
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);
            }
        }
    };
}

​/**
 * 获取时间选择控件的渲染配置对象
 * @param ele 时间选择控件挂载的html元素
 * @param initValue 时间选择控件初始值，Date类型的对象，可以为null
 * @param valueReceiver 用户在选择时间后，存储该值的引用的变量名，是字符串类型
 */
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"));

第二种方法是自己新掌握的，以此记之，继续加油。