更新记录

1.0.0（2026-03-16） 下载此版本

日期范围选择器

平台兼容性

uni-app(3.7.3)

at-date-range

日期范围选择器使用文档

简介

一个支持底部弹出动画、时间范围限制的日期范围选择器组件，适用于移动端H5/小程序。

效果预览

• 底部弹出动画
• 支持最小/最大日期限制
• 直观的日期范围选择交互
• 今日高亮显示

安装导入

import AtDateRange from '@/components/at-date-range.vue'

基础用法

1. 最简用法

<template>
    <view>
        <button @click="showPicker = true">选择日期</button>
        <at-date-range v-model="showPicker" @confirm="handleConfirm" />
    </view>
</template>

<script setup>
import { ref } from 'vue'

const showPicker = ref(false)

const handleConfirm = (range) => {
    console.log('选择范围：', range) // { start: '2024-01-01', end: '2024-01-07' }
}
</script>

2. 双向绑定用法

<template>
    <view>
        <view>已选择：{{ startDate }} 至 {{ endDate }}</view>
        <button @click="showPicker = true">修改日期</button>

        <at-date-range 
            v-model="showPicker"
            v-model:startDate="startDate"
            v-model:endDate="endDate"
            @confirm="handleConfirm"
        />
    </view>
</template>

<script setup>
import { ref } from 'vue'

const showPicker = ref(false)
const startDate = ref('2024-01-01')
const endDate = ref('2024-01-07')
</script>

3. 带时间范围限制

<template>
    <view>
        <button @click="showPicker = true">选择日期</button>

        <at-date-range 
            v-model="showPicker"
            :minDate="minDate"
            :maxDate="maxDate"
            @confirm="handleConfirm"
        />
    </view>
</template>

<script setup>
import { ref } from 'vue'

const showPicker = ref(false)

// 限制可选范围：今天 ~ 30天后
const minDate = new Date()
const maxDate = new Date()
maxDate.setDate(maxDate.getDate() + 30)

// 限制可选范围：固定日期
// const minDate = '2024-01-01'
// const maxDate = '2024-12-31'
</script>

参数说明

事件回调