vue使用wd-calendar 时间遇到的坑

京麦 Wot Design 组件中Calendar 日历选择器的使用

1、遇到的问题日历模板默认可选择范围当前日期的前6个月和后6个月

vue使用wd-calendar 时间遇到的坑_第1张图片
2、解决办法:设置min-date和max-date属性

<template>
  <div>
    <wd-datetime-picker type="date" v-model="value" label="日期选择" :minDate="minDate" :maxDate="maxDate"></wd-datetime-picker>
  </div>
</template>

<script>

export default {
  name: "demo",
  data() {
   return {
      value: new Date(),
      minDate: new Date(1990,1,1), //日期可选最小值
      maxDate: new Date(2030,1,1), //日期可选最大值
   }
 }
}

3、可能遇到的问题,时间跨度太大在app里加载慢;备选方案使用DatetimePicker 日期时间选择器
vue使用wd-calendar 时间遇到的坑_第2张图片

<template>
  <div>
    <wd-datetime-picker  type="date" v-model="value" label="日期选择" :minDate="minDate" :maxDate="maxDate"></wd-datetime-picker>
  </div>
</template>

<script>

export default {
  name: "demo",
  data() {
   return {
      value: new Date(),
      minDate: new Date(1990,1,1), //日期可选最小值
      maxDate: new Date(2030,1,1), //日期可选最大值
   }
 }
}

你可能感兴趣的:(前端开发,vue.js)