Date plugin in Element UI, official address:
https://element.eleme.io/#/zh-CN/component/date-picker
We often use date plugins and modify them according to their needs. The following briefly describes the date types used.
Many people ask how to convert the date, I want to select the time within a specific time, how to increase the number of years. Calculate from before the current time, calculate after the current time, nearly a week, nearly a year, etc.?
Scenario 1:
Creation time: 2000.1.1~current moment;
Expiration time limit: 2000.1.1 - the next 50 years at the current moment; if today is 2020.11.18, the expiration time should be: 2000.1.1-2070.11.18.
template part
JS part
|
The JS code is as follows
|
|
data( ) {
return {
startDate
: {
//
Creation time limit: 2000.1.1~2050.1.1
disabledDate
:
time
=>
{
return
time
.
getTime
()
<
new
Date
(
'2000-01-01 00:00:00'
).
getTime
()
||
time
.
getTime
()
>
new
Date
(
'2050-01-01 00:00:00'
).
getTime
()
}
},
endDate
: {
//
Expiration time limit: selected creation time ~2050.1.1, if no time is selected: 2000.1.1~2050.1.1
disabledDate
:
time
=>
{
if
(
this
.
formInline
.
creationTime
) {
let
longTime
=
new
Date
(
new
Date
(
this
.
formInline
.
creationTime
).
setFullYear
(
new
Date
(
this
.
formInline
.
creationTime
).
getFullYear
()
+
50
)).
getTime
()
return
time
.
getTime
()
<
new
Date
(
this
.
formInline
.
creationTime
).
getTime
()
||
time
.
getTime
()
>
longTime
}
return
time
.
getTime
()
<
new
Date
(
'2000-01-01 00:00:00'
).
getTime
()
||
time
.
getTime
()
>
new
Date
(
'2050-01-01 00:00:00'
).
getTime
()
}
}
},
}
}
|
Example: Limit to the current time
: return time.getTime( ) < new Date('2000-01-01 00:00:00').getTime( ) || time.getTime( ) > Date.now( )
The current time is pushed back by 50 years
: new Date( ).getFullYear () + 50
Scenario 2: Want to set some default options
|
Write in
data: Example:
data(){
The color code part is as follows
return {}
}
// time selection
const
newTime
=
new
Date
(
new
Date
().
getFullYear
(),
new
Date
().
getMonth
(),
new
Date
().
getDate
())
const
times
=
[{
text
:
'Year-to-date'
,
onClick
(
picker
) {
const
end
=
new
Date
();
const
start
=
new
Date
(
new
Date
().
getFullYear
(),
0
);
picker
.
$emit
(
'pick'
, [
start
,
end
]);
}
}, {
text
:
'Recent month'
,
onClick
(
picker
) {
const
end
=
new
Date
();
// const start = newTime;
// The original problem found (click the last month continuously, the start time will be accumulated and decreased, and newTime will be replaced with new Date())
const
start
=
new
Date
()
start
.
setMonth
(
new
Date
().
getMonth
()
-
1
);
picker
.
$emit
(
'pick'
, [
start
,
end
]);
}
}, {
text
:
'The last three months'
,
onClick
(
picker
) {
const
end
=
new
Date
();
const
start
=
new
Date
();
start
.
setMonth
(
new
Date
().
getMonth
()
-
3
);
picker
.
$emit
(
'pick'
, [
start
,
end
]);
}
}, {
text
:
'最近六个月'
,
onClick
(
picker
) {
const
end
=
new
Date
();
const
start
=
new
Date
();
start
.
setMonth
(
new
Date
().
getMonth
()
-
6
);
picker
.
$emit
(
'pick'
, [
start
,
end
]);
}
}]
|