华玥组件库

中文

English

中文

English

Appearance

DatetimePicker 时间选择器组件 ​

此选择器用于时间日期选择

注意

注意： 请先执行npm i dayjs安装依赖。

温馨提示

本项目参考了 uView-Plus 开源项目的组件开发方式，基于 Vue 3 和 TypeScript 实现了自定义组件。目前该组件仍处于测试阶段。
感谢 uView-Plus 开源项目及其团队成员的贡献，他们的组件开发思路为本项目提供了宝贵地参考。如果需要了解更多组件开发细节，可以参考uView-Plus的 datetimePicker组件 的代码实现。

平台差异说明 ​

APP(vue)H5微信小程序
✔✔✔

基本使用示例 ​

html
<!-- 全局使用 -->
<hy-datetime-picker hasInput></hy-datetime-picker>
<!-- 单个组件引入 -->
<HyDatetimePicker hasInput></HyButton>
ts
import { HyDatetimePicker } from "hy-app"

通过外部按钮打开 ​

html
<template>
    <view>
        <hy-datetime-picker
            :show="show"
            mode="datetime"
        ></hy-datetime-picker>
        <hy-button @click="show = true">打开</hy-button>
    </view>
</template>

<script setup>
    import { ref } from 'vue';

    const show = ref(false);
</script>

通过内部输入框打开 ​

html
<template>
    <view>
        <hy-datetime-picker
            hasInput
            v-model="value"
            mode="datetime"
        ></hy-datetime-picker>
    </view>
</template>

<script setup>
    import { ref } from 'vue';
    
    const value = ref(Date.now());
</script>

时间模式 ​

  • datetime: 选择日期格式YYYY-MM-DD HH:mm:ss
  • date: 选择日期格式YYYY-MM-DD
  • time: 选择日期格式HH:mm
  • year-month: 选择日期格式YYYY-MM
  • month-day: 选择日期格式MM-DD
  • hour-minute: 选择日期格式HH:mm
  • minute-second: 选择日期格式mm:ss
html
<template>
    <view>
        <hy-datetime-picker hasInput v-model="value" mode="datetime"></hy-datetime-picker>
        <hy-datetime-picker hasInput v-model="value" mode="date"></hy-datetime-picker>
        <hy-datetime-picker hasInput v-model="value" mode="time"></hy-datetime-picker>
        <hy-datetime-picker hasInput v-model="value" mode="year-month"></hy-datetime-picker>
        <hy-datetime-picker hasInput v-model="value" mode="month-day"></hy-datetime-picker>
        <hy-datetime-picker hasInput v-model="value" mode="hour-minute"></hy-datetime-picker>
        <hy-datetime-picker hasInput v-model="value" mode="minute-second"></hy-datetime-picker>
    </view>
</template>

<script setup>
    import { ref } from 'vue';
    
    const value = ref(Date.now());
</script>

时间自定义格式化 ​

如有需要，可以通过formatter参数编写自定义格式化规则。

注意

微信小程序不支持通过props传递函数参数，所以组件内部暴露了一个setFormatter方法用于设置格式化方法，注意在页面的onMounted生命周期获取ref再操作。

html
<template>
    <view>
        <up-datetime-picker
			ref="datetimePickerRef"
			:show="show"
            v-model="value1"
			mode="datetime"
			:formatter="formatter"
        ></up-datetime-picker>
        <up-button @click="show = true">打开</up-button>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const show = ref(false);
const value1 = ref(Date.now());
const datetimePickerRef = ref(null);

const formatter = (type, value) => {
  if (type === 'year') {
    return `${value}年`;
  }
  if (type === 'month') {
    return `${value}月`;
  }
  if (type === 'day') {
    return `${value}日`;
  }
  return value;
};

onMounted(() => {
  // 微信小程序需要用此写法
  datetimePickerRef.value.setFormatter(formatter);
});
</script>

限制最大最小值 ​

参数minDate和maxData可以设置最大值和最小值（传入时间戳）。

html
<template>
    <view>
        <hy-datetime-picker 
            has-input
            :show="show"
            v-model="value1"
            :minDate="1587524800000"
            :maxDate="1786778555000"
            mode="datetime"
        ></hy-datetime-picker>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const value1 = ref(Date.now());
</script>

API ​

参数说明类型默认值
hasInput是否自带input输入框booleanfalse
input输入框属性集合，hasInput为true可填，详见输入框ApiHyInputProps-
format输入框显示日期格式string'YYYY-MM-DD HH:mm'
show用于控制选择器的弹出与收起booleanfalse
popupMode用于控制选择器的弹出方向bottom|center|left|right|topbottom
showToolbar是否显示顶部的操作栏booleantrue
v-model绑定值string | number | Date-
title顶部标题string-
mode展示格式date|datetime|time|year-month
|month-day|hour-minute|minute-second		datetime
maxDate可选的最大时间（时间戳毫秒）number最大默认值为后10年
minDate可选的最小时间（时间戳毫秒）number最小默认值为前10年
minHour可选的最小小时，仅mode=time有效number23
maxHour可选的最大小时，仅mode=time有效number0
minMinute可选的最小分钟，仅mode=time有效number0
maxMinute可选的最大分钟，仅mode=time有效number59
filter选项过滤函数null | functionnull
formatter输入过滤或格式化函数null | functionnull
loading是否显示加载中状态booleanfalse
itemHeight各列中，单个选项的高度number44
cancelText取消按钮的文字string取消
confirmText确认按钮的文字string确认
cancelColor取消按钮的颜色string#909193
confirmColor确认按钮的颜色string#3c9cff
visibleItemCount每列中可见选项的数量number5
closeOnClickOverlay是否允许点击遮罩关闭选择器booleanfalse
defaultIndex各列的默认索引array-
toolbarRightSlot是否右边插槽booleanfalse
customStyle自定义输入框外部样式CSSProperties-

Events ​

事件名说明回调参数
close关闭选择器时触发-
confirm点击确定按钮，返回当前选择的值Array: 见上方"回调参数"部分说明
change当选择值变化时触发Array: 见上方"回调参数"部分说明
cancel点击取消按钮-

Slots ​

插槽名说明接收值
toolbar-right工具栏右侧内容，自定义右侧内容，因为微信小程序限制，需要同时设置:toolbarRightSlot="true"生效。-
toolbar-bottom输入框下方自定义区域-

Methods ​

方法名说明
setFormatter为兼容微信小程序而暴露的内部方法，见上方说明
00:46