华玥组件库

中文

English

中文

English

Appearance

DatetimePicker 时间选择器组件 ​

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

注意

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

📌平台差异说明 ​

APP(vue)H5微信小程序支付宝小程序
✔✔✔✔

⚠️注意事项 ​

注意事项

  • minDate 和 maxDate 参数需要传入时间戳（毫秒），而非日期字符串
  • 微信小程序不支持通过props传递函数参数，formatter 需要通过 setFormatter 方法设置
  • hasInput 设置为 true 时，组件会自带输入框，点击输入框可打开选择器
  • mode 支持多种格式，详见下方说明
  • minHour、maxHour、minMinute、maxMinute 仅在 mode=time 时有效

🏯基本使用示例 ​

通过内部输入框打开 ​

html
<template>
    <hy-datetime-picker v-model="value" has-input></hy-datetime-picker>
</template>

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

    const value = ref('')
</script>

通过外部按钮打开 ​

html
<template>
    <view>
        <hy-button @click="showPicker = true" :text="value || '选择日期'"></hy-button>
        <hy-datetime-picker
            v-model="value"
            v-model:show="showPicker"
            mode="date"
        ></hy-datetime-picker>
    </view>
</template>

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

    const value = ref('')
    const showPicker = ref(false)
</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 v-model="value1" has-input></hy-datetime-picker>

        <!-- 年月日 -->
        <hy-datetime-picker v-model="value2" has-input mode="date"></hy-datetime-picker>

        <!-- 年月 -->
        <hy-datetime-picker v-model="value3" has-input mode="year-month"></hy-datetime-picker>

        <!-- 月日 -->
        <hy-datetime-picker v-model="value4" has-input mode="month-day"></hy-datetime-picker>

        <!-- 时间(时分秒) -->
        <hy-datetime-picker v-model="value5" has-input mode="time"></hy-datetime-picker>

        <!-- 小时/分 -->
        <hy-datetime-picker v-model="value6" has-input mode="hour-minute"></hy-datetime-picker>

        <!-- 分/秒 -->
        <hy-datetime-picker v-model="value7" has-input mode="minute-second"></hy-datetime-picker>
    </view>
</template>

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

    const value1 = ref('')
    const value2 = ref('')
    const value3 = ref('')
    const value4 = ref('')
    const value5 = ref('')
    const value6 = ref('')
    const value7 = ref('')
</script>

设置最大值最小值 ​

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

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

    const value = ref(Date.now())
    // 设置可选范围为过去一年到未来一年
    const minDate = computed(() => {
        return new Date(new Date().getFullYear() - 1, 0, 1).getTime()
    })
    const maxDate = computed(() => {
        return new Date(new Date().getFullYear() + 1, 11, 31).getTime()
    })
</script>

时间自定义格式化 ​

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

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

    const show = ref(false)
    const value = 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>

自定义按钮文字和颜色 ​

html
<template>
    <hy-datetime-picker
        has-input
        v-model="value"
        cancelText="取消选择"
        confirmText="确认选择"
        cancelColor="#999999"
        confirmColor="#f56c6c"
    ></hy-datetime-picker>
</template>

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

    const value = ref('')
</script>

自定义输入框样式 ​

html
<template>
    <hy-datetime-picker
        has-input
        v-model="value"
        :input="{ placeholder: '请选择日期时间', border: true }"
        customStyle="{ marginTop: '20rpx' }"
    ></hy-datetime-picker>
</template>

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

    const value = ref('')
</script>

API ​

DatetimePicker Props ​

参数说明类型默认值
show用于控制选择器的弹出与收起booleanfalse
v-model绑定值string | number | Date-
mode展示格式date | datetime | time | year-month | month-day | hour-minute | minute-seconddatetime
hasInput是否自带input输入框booleanfalse
input输入框属性集合，hasInput为true可填，详见输入框ApiHyInputProps-
format输入框显示日期格式string'YYYY-MM-DD HH:mm'
popupMode用于控制选择器的弹出方向bottom | center | left | right | topbottom
showToolbar是否显示顶部的操作栏booleantrue
title顶部标题string-
maxDate可选的最大时间（时间戳毫秒）number后10年
minDate可选的最小时间（时间戳毫秒）number前10年
minHour可选的最小小时，仅mode=time有效number0
maxHour可选的最大小时，仅mode=time有效number23
minMinute可选的最小分钟，仅mode=time有效number0
maxMinute可选的最大分钟，仅mode=time有效number59
filter选项过滤函数functionnull
formatter选项格式化函数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-
customClass自定义外部类名string-

Events ​

事件名说明回调参数
close关闭选择器时触发-
confirm点击确定按钮，返回当前选择的值{ value, mode }
change当选择值变化时触发{ value, mode }
cancel点击取消按钮-

Slots ​

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

Methods ​

方法名说明
setFormatter为兼容微信小程序而暴露的内部方法，用于设置格式化函数

Typings ​

类型说明
ts

type IParam = {
    /** 值 */
    value: string | number
    /** 时间模型 */
    mode: HyApp.DateModeEnum
}
13:35