通過看官方文檔,部分參數如下圖:
在vant里面我們可以自定義顏色主題,設置最大值和最小值,默認值等
<van-field readonly clickable :value="" label="選擇日期" placeholder="請選擇日期" @click="showCalendar = true" input-align="right" /> <van-calendar v-model="showCalendar" :max-date="maxDate" :min-date="minDate" :default-date="defaultDate || new Date()" @confirm="onConfirm($event, index)" color="#2846FF" />
可以在confirm方法中格式化選中的日期
onConfirm(date, index) { let y = date.getFullYear(); let m = date.getMonth() + 1; m = m < 10 ? "0" + m : m; let d = date.getDate(); d = d < 10 ? "0" + d : d; const time = y + "年" + m + "月" + d + "日"; this.value = time; this.showCalendar = false; },
值得注意的是:
- 如果數據回顯后,點擊日期彈窗,沒有默認選中回顯的日期,需要通過defaultDate設置,defaultDate的類型需要是日期類型的,不能是字符型類型的(例:“2021-02-30”)
- ios兼容問題
- 初次加載日期彈窗時,顯示不全,下面顯示白色空白,需滑動一下屏幕,才可正常顯示(解決方法:好像是因為彈窗高度80%的問題,可更改高度解決。)
/deep/.van-calendar__popup.van-popup--bottom, .van-calendar__popup.van-popup--top{ height: 75% !important; }
- 日期顯示NAN問題,ios不支持“2021-02-30”這種帶“-”形式的顯示,可換成“/”。
new Date(time.replace(new RegExp("-",("gm")),"/"))