uni-app #插件需求#替换为空格 uni-datetime-picker 日期选择器 - DCloud前端团队 增加日期多选

在 uni-app 中，uni-datetime-picker 组件默认是不支持日期多选的。为了满足这个需求，我们需要对组件进行一定的扩展或者自定义一个支持多选的日期选择器。以下是一个简单的实现思路及代码示例，展示了如何通过自定义组件实现日期多选功能。

1. 创建自定义日期选择器组件

首先，我们创建一个名为 multi-date-picker 的自定义组件。

<!-- components/multi-date-picker.vue -->
<template>
  <view class="multi-date-picker">
    <view class="date-list">
      <view
        v-for="(date, index) in selectedDates"
        :key="index"
        class="date-item"
        @click="removeDate(index)"
      >
        {{ formatDate(date) }}
        <text class="remove-icon" @click.stop="removeDate(index)">×</text>
      </view>
    </view>
    <uni-datetime-picker
      type="date"
      @change="onDateChange"
      :value="currentDate"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDates: [],
      currentDate: null,
    };
  },
  methods: {
    onDateChange(event) {
      const newDate = new Date(event.detail.value);
      if (!this.selectedDates.some(date => this.isSameDay(date, newDate))) {
        this.selectedDates.push(newDate);
        this.currentDate = null; // Clear current date after selection
      }
    },
    isSameDay(date1, date2) {
      return (
        date1.getFullYear() === date2.getFullYear() &&
        date1.getMonth() === date2.getMonth() &&
        date1.getDate() === date2.getDate()
      );
    },
    formatDate(date) {
      return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`;
    },
    removeDate(index) {
      this.selectedDates.splice(index, 1);
    },
  },
};
</script>

<style scoped>
/* Add your styles here */
</style>

2. 使用自定义日期选择器组件

然后，在需要使用日期多选的页面中引入并使用这个自定义组件。

<template>
  <view>
    <multi-date-picker />
  </view>
</template>

<script>
import MultiDatePicker from '@/components/multi-date-picker.vue';

export default {
  components: {
    MultiDatePicker,
  },
};
</script>

<style>
/* Add your page styles here */
</style>

注意事项

• 上述代码示例是一个基本的实现，没有包含所有的边界情况处理，比如日期范围的限制等。
• 样式部分需要根据具体需求进行自定义。
• uni-datetime-picker 的 type 属性可以根据需要调整为 datetime 或 time，以实现不同的选择需求。

通过这种方式，你可以在 uni-app 中实现一个基本的日期多选功能。