当前位置：首页 > article >正文

鸿蒙OSUniApp 实现的日期选择器与时间选择器组件#三方框架 #Uniapp

article 2025/6/25 18:34:52

UniApp 实现的日期选择器与时间选择器组件

在移动应用开发中，日期选择器和时间选择器是表单、预约、日程、打卡等场景中不可或缺的基础组件。一个好用的日期/时间选择器不仅能提升用户体验，还能有效减少输入错误。随着 HarmonyOS（鸿蒙）生态的不断壮大，开发一套兼容鸿蒙的日期与时间选择器组件变得尤为重要。本文将结合 UniApp 跨平台开发的优势，详细讲解如何实现一个高效、易扩展、适配鸿蒙的日期和时间选择器组件，并分享实际案例和鸿蒙适配经验。

为什么要自定义日期/时间选择器？

虽然 UniApp 提供了 uni-datetime-picker、uni-picker 等基础能力，但在实际项目中，往往会遇到如下需求：

支持日期、时间、日期时间等多种模式；
支持自定义样式、格式、占位符、禁用范围等；
兼容多端，尤其是 HarmonyOS 设备的适配和体验优化；
支持表单校验、联动、快捷选择等高级功能。

自定义组件不仅能满足个性化需求，还能提升整体产品体验和品牌一致性。

组件设计思路

设计一个日期/时间选择器组件，需要考虑以下几个方面：

多模式支持：日期、时间、日期时间、年月等多种选择模式。
交互体验：弹窗选择、滑动选择、快捷选项、禁用日期等。
样式定制：支持自定义颜色、图标、占位符、动画等。
鸿蒙适配：在鸿蒙端保证弹窗、滑动、动画等能力正常。
易用性与扩展性：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>