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