uview-ultra v4

Appearance

DatetimePicker 选择器 ​

此选择器用于时间日期

平台差异说明 ​

App（vue）App（nvue）H5小程序
√√√√

基本使用 ​

  • 通过show绑定一个布尔值变量，用于控制组件的弹出与收起。
  • 通过mode配置选择何种日期格式。
html
<template>
	<view>
        <up-datetime-picker
            hasInput
            :show="show"
            v-model="value1"
            mode="datetime"
        ></up-datetime-picker>
		<up-button @click="show = true">打开</up-button>
	</view>
</template>

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

const show = ref(false);
const value1 = ref(Date.now());
</script>
html
<template>
	<view>
        <up-datetime-picker
            hasInput
            :show="show"
            v-model="value1"
            mode="datetime"
        ></up-datetime-picker>
		<up-button @click="show = true">打开</up-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
                value1: Number(new Date()),
			}
		}
	}
</script>

年 月 日 ​

此模式通过mode设置为date。

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

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

const show = ref(false);
const value1 = ref(Date.now());
</script>
html
<template>
    <view>
        <up-datetime-picker
            :show="show"
            v-model="value1"
            mode="date"
        ></up-datetime-picker>
        <up-button @click="show = true">打开</up-button>
    </view>
</template>

<script>
	export default {
        data() {
            return {
                show: false,
                value1: Number(new Date()),
            }
        }
	}
</script>

格式化 ​

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

注意：

微信小程序不支持通过props传递函数参数，所以组件内部暴露了一个setFormatter方法用于设置格式化方法，注意在页面的onReady生命周期获取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';
import { onReady } from '@dcloud/uni-app';

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;
};

onReady(() => {
  // 微信小程序需要用此写法
  datetimePickerRef.value.setFormatter(formatter);
});
</script>
html
<template>
    <view>
        <up-datetime-picker
			ref="datetimePicker"
			:show="show"
            v-model="value1"
			mode="datetime"
			:formatter="formatter"
        ></up-datetime-picker>
        <up-button @click="show = true">打开</up-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                value1: Number(new Date()),
            }
        },
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
        methods: {
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                if (type === 'day') {
                    return `${value}日`
                }
                return value
            },
        },
    }
</script>

限制最大最小值 ​

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

html
<template>
    <view>
        <up-datetime-picker
            :show="show"
            v-model="value1"
            :minDate="1587524800000"
            :maxDate="1786778555000"
            mode="datetime"
        ></up-datetime-picker>
        <up-button @click="show = true">打开</up-button>
    </view>
</template>

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

const show = ref(false);
const value1 = ref(Date.now());
</script>
html
<template>
    <view>
        <up-datetime-picker
            :show="show"
            v-model="value1"
            :minDate="1587524800000"
            :maxDate="1786778555000"
            mode="datetime"
        ></up-datetime-picker>
        <up-button @click="show = true">打开</up-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                value1: Number(new Date()),
            }
        }
    }
</script>

右侧演示页面源代码地址 ​

点击以下链接以查看右侧演示页面的源码


 github  gitee

API ​

Props ​

参数说明类型默认值可选值
hasInput 3.1.49是否自带input输入框Booleanfalsetrue
format 3.1.49输入框显示日期格式String'YYYY-MM-DD HH:mm'
placeholder 3.1.49输入框placeholderString请选择
show用于控制选择器的弹出与收起Booleanfalsetrue
popupMode用于控制选择器的弹出方向Stringbottomtop、bottom、left、right
showToolbar是否显示顶部的操作栏Booleantruefalse
v-model绑定值String | Number--
title顶部标题String--
mode展示格式Stringdatetimedate为日期选择，time为时间选择，year-month为年月选择
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输入过滤或格式化函数(如需兼容微信小程序，则只能通过setFormatter方法)Functionnull-
loading是否显示加载中状态Booleanfalsetrue
itemHeight各列中，单个选项的高度String | Number44-
cancelText取消按钮的文字String取消-
confirmText确认按钮的文字String确认-
cancelColor取消按钮的颜色String#909193-
confirmColor确认按钮的颜色String#3c9cff-
visibleItemCount每列中可见选项的数量String | Number5-
closeOnClickOverlay是否允许点击遮罩关闭选择器（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）Booleanfalsetrue
defaultIndex各列的默认索引Array[]-

Events ​

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

Slots ​

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

Methods ​

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