uni-app 选择不连续的日期

在uni-app中，如果你需要实现选择不连续的日期功能，可以通过自定义组件和日期选择逻辑来实现。以下是一个简单的代码案例，展示如何实现这一功能。

首先，你需要一个日期选择器组件，这里假设你已经有一个基本的日期选择器，用户可以点击选择日期。接下来，你需要一个数组来存储用户选择的日期。

1. 页面数据初始化

在你的页面数据中，初始化一个数组来存储选择的日期：

data() {
    return {
        selectedDates: []  // 存储选择的日期
    };
}

1. 日期选择器组件

假设你有一个日期选择器组件 DatePicker，它有一个 date 属性用于绑定当前日期，以及一个 select 事件用于用户选择日期时触发。

<template>
    <view>
        <date-picker
            v-for="(date, index) in dateRange"
            :key="index"
            :date="date"
            @select="handleSelect(date)"
        ></date-picker>
    </view>
</template>

1. 处理日期选择

在用户选择日期时，将日期添加到 selectedDates 数组中：

methods: {
    handleSelect(date) {
        const index = this.selectedDates.indexOf(date);
        if (index > -1) {
            // 如果日期已存在，则移除
            this.selectedDates.splice(index, 1);
        } else {
            // 如果日期不存在，则添加
            this.selectedDates.push(date);
        }
        console.log(this.selectedDates);  // 打印选择的日期
    },
    // 假设你有一个日期范围数组
    getDateRange() {
        const startDate = new Date('2023-01-01');
        const endDate = new Date('2023-12-31');
        const dateRange = [];
        let currentDate = new Date(startDate);

        while (currentDate <= endDate) {
            dateRange.push(currentDate.toISOString().split('T')[0]);
            currentDate.setDate(currentDate.getDate() + 1);
        }
        return dateRange;
    }
}

1. 生命周期钩子

在页面的 onLoad 或 mounted 生命周期钩子中，初始化日期范围：

onLoad() {
    this.dateRange = this.getDateRange();
}

以上代码提供了一个基本的框架，用于在uni-app中实现选择不连续的日期功能。你可以根据实际需求进一步扩展和优化，比如添加日期格式化、日期禁用等功能。此外，确保你的 DatePicker 组件能够正确接收和处理 date 属性和 select 事件。