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

淼学派对

于 2025-05-26 22:08:36 发布

阅读量1.1k

点赞数 15

分类专栏： uniapp鸿蒙os 文章标签： harmonyos uni-app 华为

本文链接：https://blog.csdn.net/lbcyllqj/article/details/148240627

版权

uniapp鸿蒙os 专栏收录该内容

70 篇文章

订阅专栏

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>