通过看官方文档,部分参数如下图:

Calendar中遇到的问题_vue

在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兼容问题
  1. 初次加载日期弹窗时,显示不全,下面显示白色空白,需滑动一下屏幕,才可正常显示(解决方法:好像是因为弹窗高度80%的问题,可更改高度解决。)
    /deep/.van-calendar__popup.van-popup--bottom, .van-calendar__popup.van-popup--top{ height: 75% !important; }
  2. 日期显示NAN问题,ios不支持“2021-02-30”这种带“-”形式的显示,可换成“/”。
    new Date(time.replace(new RegExp("-",("gm")),"/"))