更新记录

1.0.0（2026-02-11） 下载此版本

1.0.0 首发

平台兼容性

uni-app(3.7.2)

其他

dy-month 月份范围选择器

简介

dy-month 是一个用于选择月份范围的组件，特别适合需要在移动应用中让用户选择特定月份范围的场景。该组件支持双向绑定显示状态，并允许用户通过滑动选择开始和结束月份。

参数（Props）

事件（Events）

使用示例

基本用法

<template>
    <view class="content">

        <view class="demo-controls">
            <view class="range-input" @click="showPicker = true">
                <text class="range-value">{{ result || '开始月份 - 结束月份' }}</text>
                <!-- <view class="range-icon"><text class="icon-check">✓</text></view> -->
            </view>
        </view>
        <dy-month v-model:show="showPicker" :start="'2025-10'" :end="'2026-01'" :minDate="'2025-10'" :returnList="true" @confirm="onConfirm" />
        <view>{{ months }}</view>
    </view>
</template>

<script>
    import DyMonth from '../../components/dy-month/dy-month.vue'
    export default {
        components: { DyMonth },
        data() {
            return {
                title: 'dy-month Demo',
                showPicker: false,
                result: '',
                months: []
            }
        },
        onLoad() {

        },
        methods: {
            onConfirm({ start, end }, months) {
                this.result = `${start} - ${end}`
                this.months = months || []
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .demo-controls{
        margin-top: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20rpx;
    }
    .range-input{
        width: 680rpx;
        min-height: 88rpx;
        padding: 16rpx 24rpx;
        border-radius: 24rpx;
        background-color: #fff;
        border: 1rpx solid #e5e5e5;
        box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
        display: flex;
        align-items: center;
    }
    .range-input:active{
        border-color: #007aff;
    }
    .range-value{
        font-size: 32rpx;
        color: #333;
        flex: 1;
        text-align: left;
    }
    .range-icon{
        width: 44rpx;
        height: 44rpx;
        border: 1rpx solid #dcdcdc;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f9f9f9;
    }
    .icon-check{
        font-size: 30rpx;
        color: #007aff;
        line-height: 1;
    }
</style>

注意事项

• maxDate 如果未指定，则会默认设置为当前月份。
• minCount 和 maxCount 可以用来限制用户选择的最小和最大月份数量。如果用户选择的数量不符合这些限制，组件将自动调整选择范围以符合要求。
• returnList 设置为 true 时，在确认选择时除了返回起始和结束月份外，还会返回整个选择范围内的所有月份。