在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,因此封裝如下:
- 將laydate對(duì)象的引用讓頁(yè)面的vm對(duì)象持有
- 在需要賦值的地方,調(diào)用vm.laydate.render()方法
- 步驟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ù)加油。