Fix: 时间最大最小限制不生效

Add: 可以指定渲染容器
pull/77/head
Maorey 2018-09-10 13:57:50 +08:00
parent bfc0c1bf6d
commit 27cc176162
5 changed files with 1110 additions and 1035 deletions

3
.gitignore vendored
View File

@ -18,3 +18,6 @@ node_modules/
_site/ _site/
release/ release/
.npmignore .npmignore
yarn*
*.log
*.lock

2
dist/laydate.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -377,8 +377,8 @@
, range: false //是否开启范围选择,即双控件 , range: false //是否开启范围选择,即双控件
, format: 'yyyy-MM-dd' //默认日期格式 , format: 'yyyy-MM-dd' //默认日期格式
, value: null //默认日期支持传入new Date()或者符合format参数设定的日期格式字符 , value: null //默认日期支持传入new Date()或者符合format参数设定的日期格式字符
,min: '1900-1-1' //有效最小日期,年月日必须用“-”分割,时分秒必须用“:”分割。注意:它并不是遵循 format 设定的格式。 , min: '1900-1-1 00:00:00' //有效最小日期,年月日必须用“-”分割,时分秒必须用“:”分割。注意:它并不是遵循 format 设定的格式。
,max: '2099-12-31' //有效最大日期,同上 , max: '2099-12-31 23:59:59' //有效最大日期,同上
, trigger: 'focus' //呼出控件的事件 , trigger: 'focus' //呼出控件的事件
, show: false //是否直接显示如果设置true则默认直接显示控件 , show: false //是否直接显示如果设置true则默认直接显示控件
, showBottom: true //是否显示底部栏 , showBottom: true //是否显示底部栏
@ -391,6 +391,7 @@
, zIndex: null //控件层叠顺序 , zIndex: null //控件层叠顺序
, done: null //控件选择完毕后的回调,点击清空/现在/确定也均会触发 , done: null //控件选择完毕后的回调,点击清空/现在/确定也均会触发
, change: null //日期时间改变后的回调 , change: null //日期时间改变后的回调
, container: 'body' // 日期组件容器
}; };
//多语言 //多语言
@ -718,7 +719,21 @@
that.remove(Class.thisElemDate); that.remove(Class.thisElemDate);
//如果是静态定位则插入到指定的容器中否则插入到body //如果是静态定位则插入到指定的容器中否则插入到body
isStatic ? options.elem.append(elem) : ( // 优先插入到指定的容器里
var container;
switch (typeof options.container) {
case 'string':
try {
container = document.querySelector(options.container);
} catch (e) { }
break;
case 'object':
break;
default:
container = 0;
}
container ? container.append(elem) : isStatic ? options.elem.append(elem) : (
document.body.appendChild(elem) document.body.appendChild(elem)
, that.position() //定位 , that.position() //定位
); );
@ -969,12 +984,13 @@
, options = that.config, timestrap = {} , options = that.config, timestrap = {}
, dateTime = options[index > 41 ? 'endDate' : 'dateTime'] , dateTime = options[index > 41 ? 'endDate' : 'dateTime']
, isOut, thisDateTime = lay.extend({}, dateTime, date || {}); , isOut, thisDateTime = lay.extend({}, dateTime, date || {});
lay.each({ lay.each({
now: thisDateTime now: thisDateTime
, min: options.min , min: options.min
, max: options.max , max: options.max
}, function (key, item) { }, function (key, item) {
timestrap[key] = that.newDate(lay.extend({ timestrap[key] = that.newDate(lay.extend(options.type === 'time' ? {} : {
year: item.year year: item.year
, month: item.month , month: item.month
, date: item.date , date: item.date
@ -1202,6 +1218,11 @@
} else { } else {
that[startEnd] = dateTime; that[startEnd] = dateTime;
} }
// 使当前时间在最大最小区间
lay.each(['hours', 'minutes', 'seconds'], function (i, item) {
that[startEnd][item] = Math.max(Math.min(options.max[item], that[startEnd][item]), options.min[item]);
});
lay.each([24, 60, 60], function (i, item) { lay.each([24, 60, 60], function (i, item) {
var li = lay.elem('li'), childUL = ['<p>' + lang.time[i] + '</p><ol>']; var li = lay.elem('li'), childUL = ['<p>' + lang.time[i] + '</p><ol>'];
lay.each(new Array(item), function (ii) { lay.each(new Array(item), function (ii) {

51
test/index.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>限制时间范围</title>
<script src="../src/laydate.js"></script>
</head>
<body>
<input id="start" placeholder="请选择日期" />
<div id="start_date"></div>
<input id="end" placeholder="请选择日期" />
<div id="end_date"></div>
<script>
function setAtts(obj, target) {
for (var key in target) {
obj[key] = target[key];
}
}
var start = laydate.render({
elem: '#start',
container: '#start_date',
type: 'time',
done: function (value, date) {
setAtts(end.config.min, date || {
hours: 0,
minutes: 0,
seconds: 0
});
}
});
var end = laydate.render({
elem: '#end',
container: '#end_date',
type: 'time',
done: function (value, date) {
setAtts(start.config.max, date || {
hours: 23,
minutes: 59,
seconds: 59
});
}
});
</script>
</body>
</html>