Calendar中遇到的問題


通過看官方文檔,部分參數如下圖:

在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")),"/"))
 
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM