记录一下遇到的问题~ 第一次记录 先看效果图
首页面:
点击出发时间 弹出时间选择器:
选择时间后,返回时间:
代码部分:三个页面(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.weixin.qq.com/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~收