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

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

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

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

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

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

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

组件设计思路

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

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


如有问题或更好的实现思路,欢迎留言交流!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

淼学派对

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值