【向后台传日期区间】Vue+Element-ui+DateTimePicker 日期时间选择器往后台传日期区间的问题
需求:根据给定日期的范围查询,将日期传给后端1.首先使用elementui中时间选择器<el-form-item label="时间选择:"><el-date-pickerv-model="params.date"type="daterange"format="yyyy 年 MM 月 dd 日"value-format="yyyy-MM-dd"
·
需求:根据给定日期的范围查询,将日期传给后端
1.首先使用elementui中时间选择器
<el-form-item label="时间选择:">
<el-date-picker
v-model="params.date"
type="daterange"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="dateFormat"
>
</el-date-picker>
</el-form-item>
2.使用v-model 绑定值
注意: 这里的startTime和endTime才是真正后台接受的值,继续看下面内容
data() {
return {
params: {
startTime: '',
endTime: '',
date: ''
}}}
3.使用**@change=“dateFormat”**方法,来获取日期区间
在element中加入 *@change=“dateFormat”*方法,上边代码已加,代码直接复制就可以,不需要修改
这里取日期有两种方法:方法二注释了 代码直接复制即可
注意: element中的中的 type="daterange"默认返回的是一个 String类型的数组,所以你在后台接受时不能使用Date类型去接收
完成上面两步以后就要发送请求给后台传数据了,这里需要把上面日期选择器得到的就是 date 转换为字符串
methods: {
dateFormat(picker) {
/* 法一 */
this.params.startTime = picker[0].toString()
this.params.endTime = picker[1].toString()
/* 法二 */
// let startDate = this.params.date.toString()
// this.params.startTime = startDate.substring(0, 10)
// this.params.endTime = startDate.substring(11)
},
}
如果有看不明白的欢迎留言,希望能帮助到大家
更多推荐
已为社区贡献1条内容
所有评论(0)