一、官方文档
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
},
获取当前时间戳赋值在预约时间的初始值