elementui日期多选pickerOptions日期范围选择，同时选多个值

web前端妹子

已于 2023-03-23 11:39:43 修改

阅读量1.7k

点赞数

分类专栏： elementui vue 文章标签： elementui vue.js 前端

于 2023-03-15 11:25:42 首次发布

本文链接：https://blog.csdn.net/qq_39695210/article/details/129547366

版权

本文介绍了如何在ElementUI中使用FieldOptionMultipleDatePicker.vue组件实现日期多选功能，覆盖了页面引入和修改的步骤。通过这个功能，用户可以同时选择多个日期范围。文章末尾邀请读者加入相关QQ群进行交流。

摘要由CSDN通过智能技术生成

elementui日期多选pickerOptions日期范围选择，同时选多个值

1. 组件使用FieldOptionMultipleDatePicker.vue

<template>
  <div>
    <el-date-picker
      class="date-picker"
      placeholder="请选择时间"
      size="small"
      type="dates"
      :pickerOptions="options"
      v-model="dates"
      @change="handleChange"
    />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Array
    },
    availableDate: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dates: [],
      options: {
        disabledDate: date => {
          return date.valueOf() + 86400000 < Date.now() || this.availableDate.length
            ? !