const
end
=
new
Date
(
)
;
const
start
=
new
Date
(
)
;
start
.
setTime
(
start
.
getTime
(
)
-
60
*
60
*
1000
*
24
*
7
)
;
picker
.
$emit
(
'pick'
,
[
start
,
end
]
)
text
:
'最近一个月'
,
onClick
(
picker
)
{
const
end
=
new
Date
(
)
;
const
start
=
new
Date
(
)
;
start
.
setTime
(
start
.
getTime
(
)
-
30
*
24
*
60
*
60
*
1000
)
;
picker
.
$emit
(
'pick'
,
[
start
,
end
]
)
text
:
'最近三个月'
,
onClick
(
picker
)
{
const
end
=
new
Date
(
)
;
const
start
=
new
Date
(
)
;
start
.
setTime
(
start
.
getTime
(
)
-
3
*
30
*
24
*
60
*
60
*
1000
)
;
picker
.
$emit
(
'pick'
,
[
start
,
end
]
)
methods
:
{
dateChange
(
val
)
{
this
.
startTime
=
val
.
toString
(
)
.
split
(
","
)
[
0
]
this
.
endTime
=
val
.
toString
(
)
.
split
(
","
)
[
1
]
<
/
script
>
// main.js file
import Vue
Datepicker
Ui from 'vue-
datepicker
-ui'
import 'vue-
datepicker
-ui/lib/vue
datepicker
ui.css' ;
Vue . component ( '
Datepicker
' , Vue
Datepicker
Ui )
< script >
import ' vue-
datepicker
-ui/lib/vue
datepicker
ui.css ' ;
import Vue
Datepicker
Ui from ' vue-
datepicker
-ui ' ;
export default {
components : {
Datepicker
: VueD
Element-UI的
日期
范围
选择器
，需要禁止用户选择未来
日期
，但往前的
日期
可任意选择，举例：今天是2023年6月2日，那么2023年6月3日及之后的
日期
都不能让用户点击选择
日期
选择器
（
Datepicker
）绑定到一个标准的表单 input 字段上。把焦点移到 input 上（点击或者
使用
tab 键），在一个小的覆盖层上打开一个交互日历。选择一个
日期
，点击页面上的任意地方（输入框即失去焦点），或者点击 Esc 键来关闭。如果选择了一个
日期
，则反馈显示为 input 的
值
。
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>jQuery UI
日期
选择器
（
Datepicker
） - 默认功能</title>
<link rel="stylesheet" h
ElementUI
可以说是前端特别是
使用
Vue 的开发者家喻户晓的后台管理
组件
库了。开发者对于一个经常
使用
的东西，最好是能了解它的原理，减少日常
使用
产生的 bug，以及方便之后能根据这些进行一些魔改去满足一些需求。
之前在业务开发中遇到过一个
日期
选择器
的需求，和 el-da
te
-
picker
组件
大体比较类似，但是一些功能还是有些不同，于是研究了一下 Vue2 版本 el-da
te
-
picker
源码然后做了相应修改去满足需求。
所以在这里记录一下自己关于 el-da
te
-
picker
的一
Mon Jan 04 2021 00:00:00 GMT+0800 (中国标准时间) {},
Wed Jan 06 2021 00:00:00 GMT+0800 (中国标准时间) {}
用js转一下也得到想要的数据，但是太麻烦。
一次偶然，给时间
组件
加了个ref，打印了一下：
console.log(this.$ref.
picker
Ref)
哈哈，不用转换了，直接就拿到
值
了，有没有很开心(▽).
需求：element-ui时间
选择器
（
DatePicker
）数据回显，后台返回的数据，需要前台回显展示出来。绑定
值
的格式保持一致就可以回显，否则是不能回显的，我这里得到的数据格式是年月日时分秒，需要展示的是月份
日期
（yyyy-MM-dd），所以我给time
Picker
绑定
值
的格式也设置为yyyy-MM-dd。绑定
值
的格式转换成你要显示的格式，让你要回显的
值
和【保持一致就可以回显了！
在前端开发中，很多时候都需要到时间
选择器
来限定时间的选择范围。比如在12306上买票，时间的限定是30天，而且是当前
日期
开始，那么这样的事件限定，在前端中是如何实现的呢？这里就
elementUI
的时间
选择器
来做一个类似12306上的时间
选择器
当点击
elementui
的
DatePicker
组件
，如果
日期
超过当前的
日期
就不能够点击
<el-da
te
-
picker
class="select" value-format="yyyy-MM" :
picker
-options="deadlineDa
te
" format="yyyy-MM" v-model="endMonth" type="month" placeholder=...
选择初始时间后，第二个选择的时间前后不能超过初始时间的一个月。且此时下拉框变成禁用状态。选好起始时间和
结束
时间后，下拉框与所有禁止选用的
日期
限制全部放开，以供下一轮的正常选择。例如：点击7月15日后，在8月14日往后的
日期
全部禁止选中。7月15日前一个月的6月15日之前的
日期
也全部禁止选中。未选择时间时，最初选择时间不能超过今天。...
