vant calendar 使用

<template>
  <div>
    <van-field
      :required="required"
      :label="label"
      v-model="date"
      @click="show = true"
      readonly
      right-icon="notes-o"
      input-align="right"
      :placeholder="'请选择'+label"
      :disabled="disabled"
    />
    <van-calendar
      v-model="show"
      type="range"
      :readonly="disabled"
      @confirm="onConfirm"
      confirm-text="完成"
      color="#00c87f"
      :poppable="true"
      get-container="#app"
      :min-date="min"
      :max-date="max"
      :default-date="defaultRange"
    />
    <!--    -->
  </div>
</template>

<script>
import Vue from "vue";
import { Calendar } from "vant";
import filters  from "@/filters/index";
Vue.use(Calendar);
export default {
  props: {
    // 是否必录
    disabled: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
    minDate: {
      type: String,
      default:filters.stampDate(new Date().setFullYear(new Date().getFullYear()-2)),
    },
    maxDate: {
      type: String,
      default: filters.stampDate(new Date().setFullYear(new Date().getFullYear()+2)),
    },
  },
 
  data() {
    return {
      date:this.value,
      show: false,
      min: new Date(this.minDate),
      max: new Date(this.maxDate),
    };
  },
  computed:{
    defaultRange(){
      const [start, end] = this.date.split('至');
      return [new Date(start),new Date(end)]
    },
  },
  watch: {
    value(val) {
      this.date = val;
    },
    date() {
      this.$emit("input", this.date);
    },
  },
  methods: {
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${filters.stampDate(start)} 至 ${filters.stampDate(end)}`;
      this.$emit("input", this.date);
      this.$emit('dateConfirm',date)
    },
    checkVlue() {
      const [start, end] = this.date.split('至');
      var labelstring=this.label===" "?this.placeholder.substr(3):this.label;
      console.log(labelstring, this.required , (!this.fieldValue || this.fieldValue.trim() === ""));
      if ( this.required && (!start || start.trim() === ""||!end || end.trim() === "") ) {
        this.$toast("请选择" + labelstring);
        return false;
      }
      this.$emit('blurFun',this.fieldValue);
      return true;
    },
  },
};
</script>

<style>
</style>