给laydate添加一个reload方法,实现更大的可能。

讨论 已结 1 2117
岁月小偷
悬赏:30飞吻
先上图 因为需要做一个时间范围的搜索,控件提供的时间范围不习惯,还是做成两个输入框的。思路是根据时间的选择调整另外一个控件的最大最小值。尝试了重新render另外一个控件,但是不起作用,故尝试像table等其他控件一样提供一个更新参数的方法。
//操作当前实例
,thisDate = function(){
var that = this;
return {
//提示框
hint: function(content){
that.hint.call(that, content);
}
,config: that.config
,reload: function (config) {
$.extend(true, that.config, config);
}
};
}
然而问题来了,min和max都是init过变成了一个对象了,假如laydate.render()返回的对象dateObj,执行dateObj.reload({min:'yyyy-MM-dd'});这样是不起作用的,参数是改了,但是控件他不认你的min,必须自己转换成它想要的数据格式。如下。
layui.each(elem.find('[data-type="date"]'), function (index, item) {
var idTemp = 'date' + index + getNewId();
var _elem = $(item);
_elem.data('id', idTemp);
KDP.dateObj[idTemp] = laydate.render({
elem: item,
type: (_elem.data('datetype') || 'datetime'),
format: (_elem.data('format') || 'yyyy-MM-dd HH:mm:ss'),
done: function (value, date, endDate) {
debugger;
var that = this;
var elem = this.elem;
elem = $(elem[0]);
if (elem.hasClass('dateL')) {
// 时间范围的左边
var elemR = elem.parent().next().next().find('.dateR');
var idR = elemR.data('id');
var minDate = new Date(value);
var minTemp = {
year: minDate.getFullYear(),
month: minDate.getMonth(),
date: minDate.getDate(),
hours: minDate.getHours(),
minutes: minDate.getMinutes(),
seconds: minDate.getSeconds()
};
KDP.dateObj[idR].reload({min: minTemp});
} else if (elem.hasClass('dateR')) {
// 时间范围的左边
var elemL = elem.parent().prev().prev().find('.dateL');
var idL = elemL.data('id');
var maxDate = new Date(value);
var maxTemp = {
year: maxDate.getFullYear(),
month: maxDate.getMonth(),
date: maxDate.getDate(),
hours: maxDate.getHours(),
minutes: maxDate.getMinutes(),
seconds: maxDate.getSeconds()
};
KDP.dateObj[idL].reload({max: maxTemp});
}
}
})
});
忽略各种对象,只看reload之前对min,max的处理就好,这样才能达到想要的效果,所以说,这个reload是一个假的reload,还达不到最终想要的效果,对于强迫症的人来说,当然这个关系到laydate的render渲染的逻辑,以后有时间再好好看看。其他的小伙伴有更好的思路做法请不吝赐教,谢谢。
回帖
本帖已设置禁止回复