UniApp 實現的日期選擇器與時間選擇器組件

在移動應用開發中，日期選擇器和時間選擇器是表單、預約、日程、打卡等場景中不可或缺的基礎組件。一個好用的日期/時間選擇器不僅能提升用戶體驗，還能有效減少輸入錯誤。隨著 HarmonyOS（鴻蒙）生態的不斷壯大，開發一套兼容鴻蒙的日期與時間選擇器組件變得尤為重要。本文將結合 UniApp 跨平臺開發的優勢，詳細講解如何實現一個高效、易擴展、適配鴻蒙的日期和時間選擇器組件，并分享實際案例和鴻蒙適配經驗。

為什么要自定義日期/時間選擇器？

雖然 UniApp 提供了 uni-datetime-picker、uni-picker 等基礎能力，但在實際項目中，往往會遇到如下需求：

• 支持日期、時間、日期時間等多種模式；
• 支持自定義樣式、格式、占位符、禁用范圍等；
• 兼容多端，尤其是 HarmonyOS 設備的適配和體驗優化；
• 支持表單校驗、聯動、快捷選擇等高級功能。

自定義組件不僅能滿足個性化需求，還能提升整體產品體驗和品牌一致性。

組件設計思路

設計一個日期/時間選擇器組件，需要考慮以下幾個方面：

1. 多模式支持：日期、時間、日期時間、年月等多種選擇模式。
2. 交互體驗：彈窗選擇、滑動選擇、快捷選項、禁用日期等。
3. 樣式定制：支持自定義顏色、圖標、占位符、動畫等。
4. 鴻蒙適配：在鴻蒙端保證彈窗、滑動、動畫等能力正常。
5. 易用性與擴展性：props 設計合理，便于業務集成和后續擴展。

組件實現

我們以一個通用的 DateTimePicker 組件為例，支持日期、時間、日期時間三種模式。

1. 組件結構

在 components/date-time-picker/date-time-picker.vue 下新建組件：

<template><view class="dt-picker"><inputclass="dt-input":placeholder="placeholder":value="displayValue"readonly@click="openPicker"/><pickerv-if="mode === 'date'"mode="date":value="dateValue":start="start":end="end"@change="onDateChange":disabled="disabled"/><pickerv-else-if="mode === 'time'"mode="time":value="timeValue"start="00:00"end="23:59"@change="onTimeChange":disabled="disabled"/><pickerv-elsemode="datetime":value="dateTimeValue":start="start":end="end"@change="onDateTimeChange":disabled="disabled"/></view>
</template><script>
export default {name: 'DateTimePicker',props: {value: {type: String,default: ''},mode: {type: String,default: 'date' // date, time, datetime},placeholder: {type: String,default: '請選擇日期/時間'},start: {type: String,default: ''},end: {type: String,default: ''},disabled: {type: Boolean,default: false},format: {type: String,default: '' // 可自定義顯示格式}},data() {return {show: false};},computed: {displayValue() {if (!this.value) return '';if (this.format) {// 可擴展為格式化顯示return this.value;}return this.value;},dateValue() {return this.value ? this.value.split(' ')[0] : '';},timeValue() {return this.value ? this.value.split(' ')[1] : '';},dateTimeValue() {return this.value || '';}},methods: {openPicker() {// 兼容部分端需手動觸發 picker// 這里直接依賴 input 的點擊彈出 picker},onDateChange(e) {const val = e.detail.value;this.$emit('input', val);this.$emit('change', val);},onTimeChange(e) {const val = e.detail.value;this.$emit('input', val);this.$emit('change', val);},onDateTimeChange(e) {const val = e.detail.value;this.$emit('input', val);this.$emit('change', val);}}
};
</script><style scoped>
.dt-picker {width: 100%;position: relative;margin-bottom: 32rpx;
}
.dt-input {width: 100%;height: 88rpx;border: 1rpx solid #e5e5e5;border-radius: 12rpx;padding: 0 24rpx;font-size: 32rpx;background: #f8f8f8;color: #333;
}
</style>

2. 組件使用與頁面集成

在頁面中引用并使用 DateTimePicker 組件，實現日期、時間、日期時間選擇：

<template><view class="demo-dt-picker"><date-time-picker v-model="date" mode="date" placeholder="選擇日期" /><date-time-picker v-model="time" mode="time" placeholder="選擇時間" /><date-time-picker v-model="datetime" mode="datetime" placeholder="選擇日期時間" /><text class="result">日期：{{ date }} 時間：{{ time }} 日期時間：{{ datetime }}</text></view>
</template><script>
import DateTimePicker from '@/components/date-time-picker/date-time-picker.vue';export default {components: { DateTimePicker },data() {return {date: '',time: '',datetime: ''};}
};
</script><style scoped>
.demo-dt-picker {padding: 40rpx;
}
.result {margin-top: 32rpx;color: #666;font-size: 28rpx;
}
</style>

3. HarmonyOS 適配與優化建議

• 彈窗體驗：鴻蒙端對 picker 彈窗支持良好，建議多端真機測試。
• 格式化顯示：可結合 dayjs/moment.js 等庫自定義日期時間格式。
• 禁用范圍：可根據業務需求設置 start/end 限制選擇范圍。
• UI 細節：鴻蒙設備分辨率多樣，建議用 vw/rpx 單位自適應。
• 無障礙支持：為輸入框和 picker 添加 aria-label，提升可訪問性。

4. 實際案例與體驗優化

在某鴻蒙快應用項目中，日期/時間選擇器廣泛應用于預約、打卡、日程等場景，結合表單校驗和快捷選項，極大提升了用戶體驗。實際開發中還可結合以下優化：

• 支持快捷選擇"今天"“明天”"本周末"等；
• 選擇后自動校驗并高亮錯誤；
• 結合表單聯動，選擇日期后自動刷新相關數據；
• 只讀模式下支持展示歷史記錄。

總結

基于 UniApp 的日期/時間選擇器組件方案，既能兼容 HarmonyOS 生態，也能滿足多端統一開發需求。通過靈活的 props 設計、交互優化和樣式定制，可以為用戶帶來高效、友好的日期時間選擇體驗。希望本文能為你的鴻蒙/UniApp 項目提供實用參考。

---

如有問題或更好的實現思路，歡迎留言交流！