在vue2的项目,使用el-date-picker组件,v-model="dateTimePick",具体的需求是当我点击下载按钮时会获取两个值(例如startTimeOn : "2023-06-01 16:06:43",endTimeEnd : "2023-06-01 16:11:45")要求el-date-picker在初期就显示startTimeOn和endTimeEnd,然后时间范围选择也只能在这个范围内选
时间: 2024-02-28 22:54:16 浏览: 48
一个Vue2的datetimepicker组件
你可以通过给 el-date-picker 组件绑定 value 和 range-time 属性来实现你的需求。具体操作如下:
1. 在 data 中定义 dateTimePick 变量,用来存储 el-date-picker 组件的选中时间范围。
例如:
```
data() {
return {
dateTimePick: [] // 存储 el-date-picker 组件的选中时间范围
}
}
```
2. 在 el-date-picker 组件中绑定 value 和 range-time 属性,将其分别设置为 startTimeOn 和 endTimeEnd。
例如:
```
<el-date-picker
v-model="dateTimePick"
:value="dateTimePick"
:range-time="{
disabledDate: (time) => {
if (dateTimePick.length === 0) {
return false
}
const start = new Date(startTimeOn)
const end = new Date(endTimeEnd)
return time.getTime() < start.getTime() || time.getTime() > end.getTime()
}
}"
type="datetimerange"
:picker-options="{
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}]
}">
</el-date-picker>
```
3. 在 range-time 属性中,通过 disabledDate 函数设置 el-date-picker 组件的可选时间范围。其中,如果 dateTimePick 为空数组,则表示 el-date-picker 组件的初始显示时间范围为 startTimeOn 和 endTimeEnd;否则,将 startTimeOn 和 endTimeEnd 分别转换为 Date 类型,判断当前时间是否在这个时间范围内,如果是,则返回 false,表示可选,否则返回 true,表示不可选。
例如:
```
:range-time="{
disabledDate: (time) => {
if (dateTimePick.length === 0) {
return false
}
const start = new Date(startTimeOn)
const end = new Date(endTimeEnd)
return time.getTime() < start.getTime() || time.getTime() > end.getTime()
}
}"
```
4. 最后,在点击下载按钮时,获取 dateTimePick 数组,即可得到 el-date-picker 组件的选中时间范围。
例如:
```
handleDownload() {
const [startTime, endTime] = this.dateTimePick
const startTimeOn = startTime.toLocaleString()
const endTimeEnd = endTime.toLocaleString()
console.log(startTimeOn, endTimeEnd)
}
```
阅读全文