更新记录

1（2026-11-11） 下载此版本

初始化

平台兼容性

uni-app(3.8.10)

uni-app 自定义日期选择器组件

组件名称：DatePickerDialog，仅支持选择 过去日期，不可选择未来日期，年份可配置最小起始年，上限自动到今天。

✨ 功能特性

• 年月日三级滚轮选择
• 自动限制：不能选择大于今天的日期
• 最小年份可通过 props 配置，默认 2007
• 支持 v-model 双向绑定
• 弹窗模式，自带遮罩、取消/确定按钮
• 校验非法日期、自动修正越界日期
• 输出格式：YYYY-MM-DD

📁 文件放置

将组件文件命名为 DatePickerDialog.vue，放到你的组件目录，例如： components/ └── DatePickerDialog/ └── DatePickerDialog.vue

🧾 Props 参数

参数名 类型 默认值 说明 value String '' 绑定日期，v-model 使用，格式 YYYY-MM-DD minYear Number 2007 可选最小年份

📤 事件

事件名 参数 说明 input date: string 用于 v-model 绑定，返回 YYYY-MM-DD change date: string 点击【确定】后触发，返回选中日期

📌 使用示例

<template>
  <view>
    <!-- 基础用法 -->
    <DatePickerDialog v-model="form.date" @change="handleDateChange" />

    <!-- 自定义最小年份 -->
    <DatePickerDialog 
      v-model="form.date2" 
      :min-year="2010" 
      @change="handleDateChange2" 
    />
  </view>
</template>

<script>
import DatePickerDialog from '@/components/DatePickerDialog/DatePickerDialog.vue'
export default {
  components: {
    DatePickerDialog
  },
  data() {
    return {
      form: {
        date: '',
        date2: '2020-05-20'
      }
    }
  },
  methods: {
    handleDateChange(val) {
      console.log('选中日期：', val)
    },
    handleDateChange2(val) {
      console.log('选中日期2：', val)
    }
  }
}
</script>
## 📌 返回值
2025-08-15