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

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

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

在这里插入图片描述
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 日期时间选择器
在这里插入图片描述

<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), //日期可选最大值
   }
 }
}

猜你喜欢

转载自blog.csdn.net/DevelopmentW/article/details/128834162