vue：element.ui中中日期时间范围选择控件怎么设置选择的范围，不能跨月选择

Posted 2023-04-27

如开始时间选择一月，那么结束时间只能在一月内选出。

参考技术A

可以跨月份，你先选中开始日期，然后点击第一行向右箭头切换到后面的月份，然后再选中结束日期，这样就跨月了

参考技术B 配置规则：
pickerOptions:
onPick: ( maxDate, minDate ) =>
this.choiceDate = minDate.getTime()
if (maxDate)
this.choiceDate = ''

,
disabledDate: (time) =>
const self = this;
if (!!self.choiceDate)
const startDay = (new Date(self.choiceDate).getDate() - 1) * 24 * 3600 * 1000;
const endDay = (new Date(
new Date(self.choiceDate).getFullYear(),
new Date(self.choiceDate).getMonth() + 1,
0
).getDate() - new Date(self.choiceDate).getDate()) * 24 * 3600 * 1000;
let minTime = self.choiceDate - startDay;
let maxTime = self.choiceDate + endDay;
return time.getTime() < minTime || time.getTime() > maxTime


,
choiceDate: ''
========================================================
template里面
<el-date-picker
:picker-options="pickerOptions"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
type="daterange"
align="right"></el-date-picker>

关于最近敲vue前台 使用Element UI 时间操作总少一天的问题

<el-form-item label="时间">
    <el-col :span="11">
        <el-date-picker v-model="ddd.date" type="date"  placeholder="选择日期">
        </el-date-picker>
    </el-col>
</el-form-item>

这是之前的代码  使用了默认的Element UI 操作结果在添加修改操作时时间格式总是少两天 我在页面打印了选择时间格式后的值  显示的是格林尼治时间

然后我查资料   添加了 value-format="yyyy-MM-dd"  属性后  值成功少了一天  好开心

 

<el-form-item label="时间">
    <el-col :span="11">
        <el-date-picker v-model="ddd.date" value-format="yyyy-MM-dd" type="date"  placeholder="选择日期">
        </el-date-picker>
    </el-col>
</el-form-item>

 

但是还是少一天  于是我想是不是时区不太对 

就在后台实体类字段上加上 注解

 

@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
private Date date;

之后数据库和自己选择的值就对应上了 

但是又引发了一个问题数据库的值和页面回显的数据是不一样的还是少一天

页面显示数据不正确

于是参考之前学习过的yml配置 更改了配置文件添加了几行配置

spring:
  jackson:
    date-format: yyyy-MM-dd
    time-zone: GMT+8

这样页面数据和数据库就保持一致了