前端开发
JavaScript
Vue.js
ElementUI
Vue.js 3

element-plus的日期选择器如何限制所选时间范围不能超过30天?

最近项目用vue3+element-plus开发，试用日期选择器的时候遇到了一个问题，就是element-plus没有了pickeroptions这个…
关注者
13
被浏览
49,460

8 个回答

。。老弟，你截图里的disabledDate不就是干这个的？

:disabledDate="(date) => {if (xxxx) {return true}}"

element-plus中虽然取消了onPick事件,但是新增了calendar-change事件,这个事件跟onPick事件达到一样的效果 

<template>
  <el-date-picker
    v-model="date"
    @calendar-change="handleChange"
    @focus="handleFocus"
    :disabledDate="disabledDate" 
    :value-format='YYYY-MM-DD'
  ></el-date-picker>
</template>
<script lang="ts">
import { computed, ref, defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const date=ref([])
    const pickDay = ref();
    const handleChange = (val: Date[]) => {
      if (props.between) {
        const [pointDay] = val;
        pickDay.value = pointDay;
    const handleFocus = () => {
      pickDay.value = null;
   const disabledDate= (time: number) => {
          if (!pickDay.value) {
            return false;
          if (props.between) {
            const con1 =
              new Date(pickDay.value).getTime() -
              props.between * 24 * 60 * 60 * 1000;
            const con2 =
              new Date(pickDay.value).getTime() +
              props.between * 24 * 60 * 60 * 1000;
            return time < con1 || time > con2;
          return false;
    return {
      date,
      handleChange,