根据社区的问题出来的灵感,实现laydate日期控件在min max的基础上增加每天可选中的时间范围

建议 已结 13 1394
岁月小偷
悬赏:20飞吻
如题,目前官方没有配只可以支持选中每天的某一个时间段,没办法上最后的招,改源码。
laydata.js
改了几个地方,有兴趣的自己找到对应的地方添加进去,关键字是添加了两个配置项tMin和tMax。使用同min,max差不多,但是只支持'HH:mm:ss'的格式,不支持其他的,也没有做输入错误的矫正之类的,健壮性有待提高。可能有其他的bug说不定。

//默认配置
Class.prototype.config = {
type: 'date' //控件类型,支持:year/month/date/time/datetime
,range: false //是否开启范围选择,即双控件
,format: 'yyyy-MM-dd' //默认日期格式
,value: null //默认日期,支持传入new Date(),或者符合format参数设定的日期格式字符
,min: '1900-1-1' //有效最小日期,年月日必须用“-”分割,时分秒必须用“:”分割。注意:它并不是遵循 format 设定的格式。
,max: '2099-12-31' //有效最大日期,同上
,tMin: '00:00:00' //每天最小时间
,tMax: '23:59:59' //每天最大时间
,trigger: 'focus' //呼出控件的事件
,show: false //是否直接显示,如果设置true,则默认直接显示控件
,showBottom: true //是否显示底部栏
,btns: ['clear', 'now', 'confirm'] //右下角显示的按钮,会按照数组顺序排列
,lang: 'cn' //语言,只支持cn/en,即中文和英文
,theme: 'default' //主题
,position: null //控件定位方式定位, 默认absolute,支持:fixed/absolute/static
,calendar: false //是否开启公历重要节日,仅支持中文版
,mark: {} //日期备注,如重要事件或活动标记
,zIndex: null //控件层叠顺序
,done: null //控件选择完毕后的回调,点击清空/现在/确定也均会触发
,change: null //日期时间改变后的回调
};

//获取限制内日期
lay.each(['min', 'max'], function(i, item){
var ymd = [], hms = [];
if(typeof options[item] === 'number'){ //如果为数字
var day = options[item]
,time = new Date().getTime()
,STAMP = 86400000 //代表一天的时间戳
,thisDate = new Date(
day ? (
day < STAMP ? time + day*STAMP : day //如果数字小于一天的时间戳,则数字为天数,否则为时间戳
) : time
);
ymd = [thisDate.getFullYear(), thisDate.getMonth() + 1, thisDate.getDate()];
day < STAMP || (hms = [thisDate.getHours(), thisDate.getMinutes(), thisDate.getSeconds()]);
} else {
ymd = (options[item].match(/\d+-\d+-\d+/) || [''])[0].split('-');
hms = (options[item].match(/\d+:\d+:\d+/) || [''])[0].split(':');
}
options[item] = {
year: ymd[0] | 0 || new Date().getFullYear()
,month: ymd[1] ? (ymd[1] | 0) - 1 : new Date().getMonth()
,date: ymd[2] | 0 || new Date().getDate()
,hours: hms[0] | 0
,minutes: hms[1] | 0
,seconds: hms[2] | 0
};
});
//获取限制内时间点
lay.each(['tMin', 'tMax'], function(i, item){
var hms = (options[item].match(/\d+:\d+:\d+/) || [''])[0].split(':');
options[item] = {
// year: ymd[0] | 0 || new Date().getFullYear()
// ,month: ymd[1] ? (ymd[1] | 0) - 1 : new Date().getMonth()
// ,date: ymd[2] | 0 || new Date().getDate()
hours: hms[0] | 0
,minutes: hms[1] | 0
,seconds: hms[2] | 0
};
});

//无效日期范围的标记
Class.prototype.limit = function(elem, date, index, time){
var that = this
,options = that.config, timestrap = {}, timestrapT = {}
,dateTime = options[index > 41 ? 'endDate' : 'dateTime']
,isOut, thisDateTime = lay.extend({}, dateTime, date || {});
lay.each({
now: thisDateTime
,min: options.min
,max: options.max
}, function(key, item){
timestrap[key] = that.newDate(lay.extend({
year: item.year
,month: item.month
,date: item.date
}, function(){
var hms = {};
lay.each(time, function(i, keys){
hms[keys] = item[keys];
});
return hms;
}())).getTime(); //time:是否比较时分秒
});
lay.each({
now: thisDateTime
,tMin: options.tMin
,tMax: options.tMax
}, function(key, item){
timestrapT[key] = that.newDate(lay.extend({},function(){
var hms = {};
lay.each(time, function(i, keys){
hms[keys] = item[keys];
});
return hms;
}(), {
year: 1
,month: 0
,date: 1
})).getTime(); //time:是否比较时分秒
});
isOut = timestrap.now < timestrap.min || timestrap.now > timestrap.max;
isOut || (isOut = timestrapT.now < timestrapT.tMin || timestrapT.now > timestrapT.tMax);
elem && elem[isOut ? 'addClass' : 'removeClass'](DISABLED);
return isOut;
};
回帖
  • vipAdmin
    2018-4-4
    [赞]
    0 回复
  • 脏
    2018-4-4
    附议[围观]
    0 回复
  • 比较久以前发的了,所以写得不具体,没有说明是哪个地方在这里圈出来,大概就是这几个地方




    0 回复
  • 行囊
    2018-9-26
    请问下这个是哪个版本,我本地的跟你这边版本不一致,混淆了。按照你的逻辑进行修改不行,不知道哪里出错了。
    0 回复
  • @行囊 混淆的改起来很费劲的,要找到对应变量的名称这个比较麻烦,不能照抄源码的,这个跟版本是没什么关系的,只要找到对应的地方,你现在用的是什么版本的?建议你在git上下载layui然后在源码上找到帖子的修改的地方修改一下,最后用gulp打包一下就可以了。
    0 回复
  • 行囊
    2018-9-26
    我是2.2.6的,我都有去修改,但怕是漏了什么,没生效。版本不一致,js的写法也不一样,所以比较麻烦,先统一一下版本进行修改看行不行。还是您方便发份你修改后的给我看看[嘻嘻]
    0 回复
  • @行囊 我找找看额,因为修改的地方可能不止这一个,你找一下里面的tmin,和tmax。
    https://pan.baidu.com/s/1_zhbkUMt5i-ZUo-NBfuKYQ
    0 回复
  • 行囊
    2018-9-26
    @岁月小偷 好的,谢谢哈
    0 回复
  • @行囊 不客气[微笑]
    0 回复
  • 行囊
    2018-9-26

    我本地这么修改,有毛病吗?我按照逻辑实现去修改了,还是没有生效,能帮忙看看吗
    0 回复