日期区间范围选择框回显的数据处理

416 阅读1分钟
 <a-range-picker class="query-input" v-model="governmentForm.remark"/>

需求:后端返回的数据为“xxxx年xx月xx日~xxxx年xx月xx日”,现在需要将这个数据进行处理后返回给日期选择框组件进行回显。

处理思路:

1.日期区间范围选择框的数据源是一个数组,我们首先需要将该字符串拆分为数组。

Snipaste_2022-12-20_13-47-27.png

let date = “xxxx年xx月xx日~xxxx年xx月xx日”;
let res = data.split('~');
//res = [ "xxxx年xx月xx日", "xxxx年xx月xx日"];

2.moment不支持xxxx年xx月xx日格式的转换,所以我们需要对数据的格式进行处理为xxxx-xx-xx

function getDate(val){
    const time1 = val.split('年')[0];
    const time2 = val.split('年')[1].split('月')[0];
    const time3 = val.split('年')[1].split('月')[1].split('日')[0];
    return `${time1}-${time2}-${time3}`
}

3.数据格式处理完成后调用moment方法即可

 // 编辑--数据回显
update(value){
let res = value.remark.split('~');
this.governmentForm={...value,
remark:[moment(this.getDate(res[0])),moment(this.getDate[res[1]])]}
}