Fusions

Appearance

DatetimePicker 日期时间选择器 ​

iPhone

此组件可以选择日期和时间的选择器。

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

  • 通过 ref 获取组件实例，并调用实例方法 open 弹出日期时间选择器。
  • 通过 mode 属性设置选择日期格式，默认值为 datetime。：可选值：
    • date：日期选择器
    • time：时间选择器
    • year: 年份选择器
    • year-month：年月选择器
    • datetime：日期时间选择器
html
<template>
    <fu-datetime-picker ref="datetimePickerRef" v-model="value"></fu-datetime-picker>
    <fu-button @click="handleOpen">打开选择器</fu-button>
</template>

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

    // data数据
    const datetimePickerRef = ref();
    let value = ref(Number(new Date()));

    // methods方法
    const handleOpen = () => {
        datetimePickerRef.value.open();
    };
</script>

年 月 日 ​

此模式通过 mode 属性设置为 date。

html
<template>
    <fu-datetime-picker 
        ref="datetimePickerRef" 
        v-model="value" 
        mode="date">
    </fu-datetime-picker>
    <fu-button @click="handleOpen">打开选择器</fu-button>
</template>

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

    // data数据
    const datetimePickerRef = ref();
    let value = ref(Number(new Date()));

    // methods方法
    const handleOpen = () => {
        datetimePickerRef.value.open();
    };
</script>

格式化 ​

通过 formatter 属性编写自定义格式化规则。

html
<template>
    <fu-datetime-picker 
        ref="datetimePickerRef" 
        v-model="value" 
        mode="date" 
        :formatter="handleFormatter">
    </fu-datetime-picker>
    <fu-button @click="handleOpen">打开选择器</fu-button>
</template>

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

    // data数据
    const datetimePickerRef = ref();
    let value = ref(Number(new Date()));

    // methods方法
    const handleOpen = () => {
        datetimePickerRef.value.open();
    };

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

设置限制最大最小值 ​

通过 maxDate 和 minDate 属性设置最大最小值（传入时间戳）。

html
<template>
    <fu-datetime-picker 
        ref="datetimePickerRef" 
        v-model="value" 
        mode="time" 
        :minDate="1587524900000" 
        :maxDate="1893470500000">
    </fu-datetime-picker>
    <fu-button @click="handleOpen">打开选择器</fu-button>
</template>

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

    // data数据
    const datetimePickerRef = ref();
    let value = ref(Number(new Date()));

    // methods方法
    const handleOpen = () => {
        datetimePickerRef.value.open();
    };
</script>

API ​

DatetimePicker Props ​

属性名说明类型默认值可选值
v-model双向绑定值String｜Number--
title顶部标题String--
titleSize顶部标题大小String｜Number15-
titleColor顶部标题颜色String#333333-
mode选择器模式，详见上方基础用法Stringdatetime-
maxDate可选的最大时间（时间戳毫秒）Number最大默认值为后10年-
minDate可选的最小时间（时间戳毫秒）Number最小默认值为前10年-
maxHour可选的最大小时，仅mode=time有效Number23-
minHour可选的最小小时，仅mode=time有效Number0-
maxMinute可选的最大分钟，仅mode=time有效Number59-
minMinute可选的最小分钟，仅mode=time有效Number0-
filter选项过滤函数Functionnull-
formatter选项格式化函数Functionnull-
loading显示加载中状态Booleanfalsetrue
itemHeight各列中，单个选项的高度Number44-
cancelText取消按钮文字String取消-
cancelSize取消按钮大小String｜Number13-
cancelColor取消按钮颜色String#888888-
confirmText确认按钮文字String确认-
confirmSize确认按钮大小String｜Number13-
confirmColor确认按钮颜色String#333333-
visibleItemCount每列中可见选项的数量String｜Number5-
closeOnClickOverlay是否允许点击遮罩关闭选择器Booleantruefalse
defaultIndex各列的默认索引Array--
maskClosable是否允许点击蒙层关闭选择器Booleantruefalse

DatetimePicker Methods ​

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

DatetimePicker Events ​

事件名说明回调参数
confirm点击确定按钮时触发，返回当前选择的值() => void
cancel点击取消按钮时触发() => void
close关闭选择器时触发() => void
change当选择值变化时触发() => void