uniapp_微信小程序_预约时间组件的使用

一、官方文档

DatetimePicker 选择器 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com)

 

二、完成的效果

 之前使用的是Calendar 日历 这个太耗性能了,直接页面卡顿,所以就换成以上选择器了

三、代码 

	<u-datetime-picker :show="showrili" v-model="value1" mode="date" @confirm="confirmrili"
			:minDate="datamiao"></u-datetime-picker>



value1: Number(new Date()),
				datamiao: null

 这个直接就显示出来了选择器

	confirmrili(e) {
				this.showrili = false
				// 给定的时间戳
				const timestamp = e.value; // 假设这是秒数
				// 创建一个Date对象,将时间戳转换为日期
				const date = new Date(timestamp);
				// 使用Date对象的方法提取年、月和日
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // JavaScript中月份是从0开始计数的,所以需要加1
				const day = date.getDate();
				this.timerili = year + "-" + month + "-" + day


			},

这个就是把拿到的时间戳转换成年月日

	onLoad() {
			// 获取当前时间戳。预约时间为默认的今天
			const currentTimestamp = Date.now();
			this.datamiao = currentTimestamp

		},

获取当前时间戳赋值在预约时间的初始值

相关推荐

  1. uniapp引入程序直播组件

    2024-04-20 10:18:09       60 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-20 10:18:09       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-20 10:18:09       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-20 10:18:09       82 阅读
  4. Python语言-面向对象

    2024-04-20 10:18:09       91 阅读

热门阅读

  1. web server apache tomcat11-08-JNDI Resources

    2024-04-20 10:18:09       38 阅读
  2. 如何在 Linux 和 Mac 终端命令中添加别名

    2024-04-20 10:18:09       34 阅读
  3. SpringMVC中,/和/*和/**分别表示什么

    2024-04-20 10:18:09       32 阅读
  4. rknn3588 rstp

    2024-04-20 10:18:09       35 阅读
  5. 每天学习一个Linux命令之chroot

    2024-04-20 10:18:09       34 阅读