解決layui時間控件清空之后無法正常使用的問題，以及時間范圍的選擇
共有兩種解決方式：
方式一(layui 1.x)：
html代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<
div
class
=
"layui-inline"
>
<
div
class
=
"layui-input-inline"
>
<
input
type
=
"text"
name
=
"start_time"
class
=
"layui-input"
id
=
"start_time"
placeholder
=
"開始時間(修改時間)"
>
</
div
>
</
div
>
<
div
class
=
"layui-inline"
>
<
div
class
=
"layui-input-inline"
>
<
input
type
=
"text"
name
=
"end_time"
class
=
"layui-input"
id
=
"end_time"
placeholder
=
"結束時間(修改時間)"
>
</
div
>
</
div
>
|
js代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
var
start = {
istime:
true
,
format:
'YYYY-MM-DD hh:mm:ss'
,
max:
'2099-06-16 23:59:59'
,
istoday:
true
,
choose:
function
(datas) {
end.min = datas;
//開始日選好后，重置結束日的最小日期
}
};
var
end = {
istime:
true
,
format:
'YYYY-MM-DD hh:mm:ss'
,
max:
'2099-06-16 23:59:59'
,
istoday:
true
,
choose:
function
(datas) {
start.max = datas;
//結束日選好后，重置開始日的最大日期
}
};
document.getElementById(
'start_time'
).onclick =
function
() {
start.elem =
this
;
laydate(start);
};
document.getElementById(
'end_time'
).onclick =
function
() {
end.elem =
this
;
laydate(end);
};
|
方式二(layui 2.x)：
html代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<
div
class
=
"layui-inline"
>
<
div
class
=
"layui-input-inline"
>
<
input
type
=
"text"
name
=
"start_time"
class
=
"layui-input"
id
=
"start_time"
placeholder
=
"開始時間(修改時間)"
>
</
div
>
</
div
>
<
div
class
=
"layui-inline"
>
<
div
class
=
"layui-input-inline"
>
<
input
type
=
"text"
name
=
"end_time"
class
=
"layui-input"
id
=
"end_time"
placeholder
=
"結束時間(修改時間)"
>
</
div
>
</
div
>
|
js代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
layui.use([
'laydate'
],
function
(){
var
$ = layui.$;
var
laydate = layui.laydate;
var
nowTime =
new
Date().valueOf();
var
max =
null
;
var
start = laydate.render({
elem:
'#start_time'
,
type:
'datetime'
,
max: nowTime,
btns: [
'clear'
,
'confirm'
],
done:
function
(value, date){
endMax = end.config.max;
end.config.min = date;
end.config.min.month = date.month -1;
}
});
var
end = laydate.render({
elem:
'#end_time'
,
type:
'datetime'
,
max: nowTime,
done:
function
(value, date){
if
($.trim(value) ==
''
){
var
curDate =
new
Date();
date = {
'date'
: curDate.getDate(),
'month'
: curDate.getMonth()+1,
'year'
: curDate.getFullYear()};
}
start.config.max = date;
start.config.max.month = date.month -1;
}
});
|
根據開始時間 動態限制結束時間 知識點
type: 'datetime', 是帶時分秒的 date 是不帶時分秒的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
layui.use(
'laydate'
,
function
(){
/* lay('.layui-input').each(function(){
laydate.render({
elem: this
,trigger: 'click'
,change: function(value, date, endDate){
console.log(value); //得到日期生成的值，如：2017-08-18
console.log(date); //得到日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得結束的日期時間對象，開啟范圍選擇（range: true）才會返回。對象成員同上。
}
});
}); */
var
$ = layui.$;
var
laydate = layui.laydate;
var
nowTime =
new
Date().valueOf();
var
max =
null
;
var
start = laydate.render({
elem:
'#start_time'
,
type:
'datetime'
,
btns: [
'clear'
,
'confirm'
],
done:
function
(value, date){
endMax = end.config.max;
end.config.min = date;
end.config.min.month = date.month -1;
},
change:
function
(value, date, endDate){
var
timestamp2 = Date.parse(
new
Date(value));
timestamp2 = timestamp2 / 1000;
end.config.min = timestamp2;
end.config.min.month = date.month -1;
}
});
var
end = laydate.render({
elem:
'#end_time'
,
type:
'date'
,
done:
function
(value, date){
console.log(
" ====== "
+date);
if
($.trim(value) ==
''
){
var
curDate =
new
Date();
date = {
'date'
: curDate.getDate(),
'month'
: curDate.getMonth()+1,
'year'
: curDate.getFullYear()};
}
start.config.max = date;
start.config.max.month = date.month -1;
}
});
});
|
通過以上代碼，就已經可以實現動態改變開始時間最大值與結束時間最小值的改變了。
下面來說一下容易遇到的坑：
坑一 ：laydate.render無法重復渲染，當laydate.render對應一個elem已經渲染過一次之后，我們是無法通過再次渲染來修改其中的max值與min值的。
坑二 ：startDate.config.max與endDate.config.min是一個對象，不是一個字符串，在網上看到一個人不負責任的給了這么一句話，endDate.config.min="2017-01-01"；說可以設置，我居然信了他的邪掉進坑里半天。實際這里得到的是一個對象，不同於在我們渲染時的min與max了，直接將字符串賦值必然沒有效果。
坑三：dates的格式雖然與endDate.config.min格式相同但是直接讓endDate.config.min=dates你會發現並不是你想要的結果，是因為雖然dates中的數據是你選擇的日期，可是endDate.config.min中設置的month的值卻比你輸入的month的值大了一個月，因此假如你選的開始日期是11月13日，直接賦值給了endDate.config.min之后你會發現結束日期的最小日期變成了12月13日，因此我們需要將dates中的月份值減一后再賦值給endDate.config.min
轉自於：https://www.jb51.net/article/171077.htm