uView DatetimePicker 选择器

此选择器用于时间日期

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

  • 通过show绑定一个布尔值变量,用于控制组件的弹出与收起。

  • 通过mode配置选择何种日期格式。

    <template> <view> <u-datetime-picker :show="show" v-model="value1" mode="datetime" ></u-datetime-picker> <u-button @click="show = true">打开</u-button> </view> </template> <script> export default { data() { return { show: false, value1: Number(new Date()), } } } </script>

copy

#年 月 日

此模式通过mode设置为date

复制代码
<template>
    <view>
        <u-datetime-picker
                :show="show"
                v-model="value1"
                mode="date"
        ></u-datetime-picker>
        <u-button @click="show = true">打开</u-button>
    </view>
</template>

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

copy

#格式化

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

注意:

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

复制代码
<template>
    <view>
        <u-datetime-picker
			ref="datetimePicker"
			:show="show"
            v-model="value1"
			mode="datetime"
			:formatter="formatter"
        ></u-datetime-picker>
        <u-button @click="show = true">打开</u-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>

copy

#限制最大最小值

参数minDatemaxDate可以设置最大值和最小值(传入时间戳)。

复制代码
<template>
    <view>
        <u-datetime-picker
                :show="show"
                v-model="value1"
                :minDate="1587524800000"
                :maxDate="1786778555000"
                mode="datetime"
        ></u-datetime-picker>
        <u-button @click="show = true">打开</u-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                value1: Number(new Date()),
            }
        }
    }
</script>
相关推荐
郑叔敲代码15 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
white-persist5 天前
Burp Suite模拟器抓包全攻略
前端·网络·安全·web安全·notepad++·原型模式
xiecoding.cn6 天前
Notepad++下载安装图文教程(附安装包)
notepad++·notepad++下载安装·notepad++下载·notepad++安装教程·notepad++安装包·notepad++下载教程
黑客思维者9 天前
Notepad++中高危DLL劫持漏洞深度剖析
notepad++·漏洞·dll劫持
Nan_Shu_6149 天前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
知识分享小能手12 天前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
cpych14 天前
删除Notepad++关于弹窗的反动字样
notepad++
知攻善防实验室14 天前
Notepad++ 本地提权漏洞|复现|分析
测试工具·安全·网络安全·notepad++
杏花春雨江南15 天前
微信小程序里 uni.navigateTo 用的多了, 容易报错,
微信小程序·小程序·notepad++
BullSmall17 天前
Windows 11 下 Notepad++ 等应用无法启动问题排查&修复
windows·notepad++