微信小程序弹出框-时间选择器

记录一下遇到的问题~ 第一次记录 先看效果图

首页面：

点击出发时间 弹出时间选择器：

选择时间后，返回时间：

代码部分：三个页面（index.wxml 、index.wxss 、index.js）关键代码部分

1.index.wxml

<view class="iconfloat"><van-icon class="iconpostion" name="clock-o" ></van-icon><van-cell title="出发时间" is-link value-class="className" value="{{timeValue}}" bind:click="showPopup" /><van-popup show="{{ Timeshow }}" position="bottom"><van-datetime-picker type="datetime" value="{{ currentDate }}" title="选择时间" min-date="{{ minDate }}" mmax-date="{{ maxDate }}" bind:cancel="timecancel" bind:confirm="confirmPicker"/></van-popup></view>

picker插件的详情介绍，请看微信官方介绍：picker | 微信开放文档微信开发者平台文档https://developers./miniprogram/dev/component/picker.html

2.index.js

Page({data: {timeValue: '请选择时间',Timeshow: false,// 初始状态不显示currentDate:'',// 当前时间为空minDate: new Date().getTime(),// 弹出框初始时间maxDate: new Date(2025, 10, 1).getTime(),// 弹出框终止时间},showPopup(){this.setData({ Timeshow: true });//显示时间选择器},timecancel(event){this.setData({ Timeshow: false });// 隐藏时间选择器},// 确认选择的时间confirmPicker (event) {this.setData({ Timeshow: false,timeValue:this.formatDate(event.detail),// 获取点击的时间});},formatDate(currentDate) {currentDate = new Date(currentDate);var Y = currentDate.getFullYear();return `${Y}/${currentDate.getMonth() + 1}/${currentDate.getDate()} ${currentDate.getHours()}:${currentDate.getMinutes()}`;// 返回选择时间},

3.index.wxss

.iconfloat{display: flex;flex-direction: row;}.van-cell{position:relative;display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;padding:10px 16px;padding:var(--cell-vertical-padding,10px) var(--cell-horizontal-padding,16px);font-size:14px;font-size:var(--cell-font-size,14px);line-height:24px;line-height:var(--cell-line-height,24px);color:#323233;color:var(--cell-text-color,#323233);background-color:#fff;background-color:var(--cell-background-color,#fff)}

OK~收