uni-app 只可以选择未来日期的日期选择器

在 uni-app 中实现一个只允许选择未来日期的日期选择器，你可以使用 uni-ui 提供的日期选择器组件，并结合其内置的禁用日期功能来实现。以下是一个示例代码，展示了如何实现这一需求。

首先，确保你的项目中已经安装了 uni-ui 库。如果还没有安装，可以通过以下命令安装：

npm install @dcloudio/uni-ui

然后在你的页面中引入并使用 uni-date-picker 组件。以下是一个完整的示例页面代码：

<template>
  <view>
    <uni-date-picker
      v-model="selectedDate"
      type="date"
      :start-date="startDate"
      :end-date="endDate"
      @change="onDateChange"
      placeholder="选择未来日期"
    ></uni-date-picker>
  </view>
</template>

<script>
import { ref, reactive, computed } from 'vue';
import UniDatePicker from '@dcloudio/uni-ui/lib/uni-date-picker/uni-date-picker.vue';

export default {
  components: {
    UniDatePicker
  },
  setup() {
    const selectedDate = ref(null);
    const now = new Date();
    const startDate = ref(now);

    // 计算一年后的日期作为endDate，用户只能选择当前日期到一年后的日期
    const endDate = computed(() => {
      const end = new Date(now);
      end.setFullYear(now.getFullYear() + 1);
      return end;
    });

    const onDateChange = (e) => {
      console.log('选中的日期:', e.detail.value);
    };

    return {
      selectedDate,
      startDate,
      endDate,
      onDateChange
    };
  }
};
</script>

<style scoped>
/* 添加一些自定义样式 */
uni-date-picker {
  margin: 20px;
}
</style>

在这个示例中，我们使用了 uni-date-picker 组件，并通过 v-model 绑定了一个 selectedDate 变量来存储用户选择的日期。startDate 被设置为当前日期，而 endDate 则是一个计算属性，它返回当前日期一年后的日期。通过设置 start-date 和 end-date 属性，我们限制了用户只能选择未来日期（从当前日期到一年后的日期）。

当用户选择一个日期时，onDateChange 方法会被触发，并打印出用户选择的日期。

这个示例提供了一个基本框架，你可以根据实际需求进一步调整日期范围、样式或其他功能。