【前端開發】Uniapp日期時間選擇器：實現分鐘動態步長設置

技術棧

Uniapp + Vue3 + uView
年份顯示前后一年，分鐘動態設置間隔

效果圖

在這里插入圖片描述

主體顯示

    <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>

底部彈窗

        <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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/81846.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/81846.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/81846.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！