开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第3天，点击查看活动详情

最新在使用vue3+elementplus开发后台管理系统，在使用日期组件的时候遇到了一些坑，仅以此篇记录。

坑1： 日期时间选项显示NaN

场景介绍

在使用el-date-picker的时候，组件选项显示NaN。 效果如图所示：

代码如下：

<el-date-picker
  v-model="value"
  type="date"
  placeholder="Pick a date"
  default-value="00:00:00"
/>

原因分析

elementplus中关于默认值的属性必须是date对象，而不再像是elementui中定义的字符串，所以才会出现NaN。

在elementplus中关于default-value和default-value是这样定义的

在eleemntui中关于default-value和default-value是这样定义的

解决方案

根据上面的原因分析，将上述default-value改成日期对象型即可解决问题。

代码如下：

<el-date-picker
  v-model="value"
  type="date"
  placeholder="Pick a date"
  :default-value="new Date(2020, 1, 1)"
/>

效果如下：

坑2： 设置可以选择的时间选项不生效

场景介绍

给el-date-picker设置picker-options属性的时候不生效

代码如下：

<el-date-picker
  v-model="value"
  type="date"
  placeholder="Pick a date"
  :picker-options="pickerOptions"
/>

pickerOptions: {
    onPick: ({ maxDate, minDate }) => {
    },
    disabledDate: (time) => {
        return false;
    }
 }

效果如下： 设置选项不生效

原因分析

在elementplus中没有picker-options属性，需要设置选项的话，需要设置disabled-date属性。

在elementui中是这样定义的

在elementplus中是这样定义的

解决方案

结合上面的原因分析，是因为属性改变的原因，这时候只需要将picker-options设置成disabled-date即可解决问题。

代码如下：

<el-date-picker
  v-model="value"
  type="date"
  placeholder="Pick a date"
  :disabled-date="disabledDateFunc"
/>

const disabledDateFunc = () => {
  return true;
}

效果如下：