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">
<input
class="dt-input"
:placeholder="placeholder"
:value="displayValue"
readonly
@click="openPicker"
/>
<picker
v-if="mode === 'date'"
mode="date"
:value="dateValue"
:start="start"
:end="end"
@change="onDateChange"
:disabled="disabled"
/>
<picker
v-else-if="mode === 'time'"
mode="time"
:value="timeValue"
start="00:00"
end="23:59"
@change="onTimeChange"
:disabled="disabled"
/>
<picker
v-else
mode="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 项目提供实用参考。
如有问题或更好的实现思路,欢迎留言交流!