技术栈

• Uniapp + Vue3 + uView
• 年份显示前后一年，分钟动态设置间隔

效果图

1. 主体显示

    <view class="uni-row-between selector"><view class="uni-flex-1 left" @click="!props.disabled && openPicker()"><uni-iconscolor="#c0c4cc"type="calendar"size="22"style="position: relative; top: 1px"></uni-icons><text class="label">{{ displayValue || placeholder }}</text></view><uni-iconscolor="#c0c4cc"type="clear"size="22"style="position: relative; top: 1px"v-if="!props.disabled && localValue"@click="clear"></uni-icons></view>

2. 底部弹窗

        <transition name="fade"><view v-if="showPicker" class="overlay" @click="closePicker"></view><view v-if="showPicker" class="picker-modal"><view class="title">{{ placeholder }}</view><view class="uni-row tab-container"><view:class="['tab', activeTab === 'date' ? 'active' : '']"@click="switchTab('date')">选择日期</view><view:class="['tab', activeTab === 'time' ? 'active' : '']"@click="switchTab('time')":style="{pointerEvents: dateConfirmed ? 'auto' : 'none',}">选择时间</view></view><picker-viewv-show="activeTab === 'date'"class="picker-view":indicator-style="'height: 50px;'":value="[yearIndex, monthIndex, dayIndex]"@change="onDateChange"><picker-view-column><view v-for="(y, i) in years" :key="i" class="picker-item">{{ y }}年</view></picker-view-column><picker-view-column><view v-for="(m, i) in months" :key="i" class="picker-item">{{ m }}月</view></picker-view-column><picker-view-column><view v-for="(d, i) in days" :key="i" class="picker-item">{{ d }}日</view></picker-view-column></picker-view><picker-viewv-show="activeTab === 'time'"class="picker-view":indic