iview DatePicker daterange data month UTC格式化問題

第一種格式化：使用后端處理UTC 格式:

1.html元素定義:

<DatePicker v-model="searchCreateTime" type="daterange" placement="bottom-end" placeholder="選擇創建時間區間"  clearable ></DatePicker>

 

2.vue js 定義:

searchCreateTime:['', ''],

 

3.獲取值:

createTimeStart: this.createTime[0],  

createTimeEnd: this.createTime[1],

 

 

4.后端接受處理

 

{"page":1,"limit":10,"status":"","wxcode":"","type":"","orderCode":"","userName":"","createTimeStart":"2020-06-07T16:00:00.000Z","createTimeEnd":"2020-06-10T16:00:00.000Z"}

SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
df.setTimeZone(TimeZone.getTimeZone("UTC"));
SimpleDateFormat dfMy = new SimpleDateFormat("yyyy-MM-dd");

String createTimeStart = StringISNULLUtil.mapToString(searchPreamMy.get("createTimeStart"));
String createTimeEnd = StringISNULLUtil.mapToString(searchPreamMy.get("createTimeEnd"));

if (createTimeEnd != null && !"".equals(createTimeEnd)) {
    map.put("createTimeEnd", dfMy.format(df.parse(createTimeEnd))+" 23:59:59");
} else {
    map.put("createTimeEnd", "");
}
if (createTimeStart != null && !"".equals(createTimeStart)) {
    map.put("createTimeStart", dfMy.format(df.parse(createTimeStart))+" 00:00:00");
} else {
    map.put("createTimeStart", "");
}

 

 

 

第二種方式: 前端格式化:

1.html元素定義: 直接使用format 是不行的, 必須使用on-change賦值才行

<DatePicker v-model="auditTime" @on-change="setOption" type="daterange" format="yyyy-MM-dd" placement="bottom-end" placeholder="選擇注冊開始時間以及結束時間" ></DatePicker>

 

2.js vue 定義:

auditTime:['',''],

 

3.on-change 設置:

setOption(date) {

  this.auditTime = date;

},

 

4.取值:

createTimeStart:this.auditTime[0],

createTimeEnd:this.auditTime[1],

 

5.后端不需要任何處理,直接接受參數即可

userSearch.setCreateTimeEnd(StringISNULLUtil.mapToString(searchPreamMy.get("createTimeEnd")));
userSearch.setCreateTimeStart(StringISNULLUtil.mapToString(searchPreamMy.get("createTimeStart")));