在搜索的時候我們經常會根據日期范圍篩選數據,后端存儲數據一般都是標準時間,前端傳參也應該是帶時間的標準時間,即使我們查詢的只是日期范圍不是日期時間范圍。
1、組件默認就是標準時間,這個是ok的,沒啥問題,但是當我們選擇同一天的時候,問題就來了,開始時間和結束時間是一樣的
參數截圖
我們期望的效果是
mawbDateStart: 2020-04-16T16:00:00.000Z
mawbDateEnd: 2020-04-17T15:59:59.000Z
這個時候需要我們在組件上加上默認時間的參數
:default-time="['00:00:00', '23:59:59']"
2、若在搜索列表中有日期時間的展示,也需要轉換成為本地時間展示,具體方法不再贅述,可以根據具體需求自己寫方法函數(關于時間建議在統一的時間工具文件中管理,注冊過濾器),或者使用moment.js轉化時間(下載地址:https://momentjs.com/)。
3、涉及到Safari瀏覽器時間的回填問題(以下瀏覽器指的是Safari)
若是后端返回2020-03-15 12:23:34或者2020/03/15T12:23:34這種時間格式,請注意,前方有坑,瀏覽器會報錯Invalid Date,不能識別這種日期格式,需要人為地把”-“改為”/“,或者讓后端規范返回值,再賦值到日期組件的model值里面
// 需要將'-'替換成'/',將'T'替換成空格
var dateStr = "2020-03-15 12:23:34"
var date = new Date(dateStr.replace(/\-/g, "/").replace(/T/, ' '))
以下是瀏覽器支持的格式
> new Date('2020/03/15 12:23:34')
< Sun Mar 15 2020 12:23:34 GMT+0800 (CST)
> new Date('2020-03-15T16:00:00.000Z')
< Fri Mar 16 2020 00:00:00 GMT+0800 (CST)
> new Date('2020-03-15')
< Thu Mar 15 2020 08:00:00 GMT+0800 (CST)
> new Date('2020-03-15T12:23:34')
< Sun Mar 15 2020 20:23:34 GMT+0800 (CST)