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

本文主要是介绍微信小程序弹出框-时间选择器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

首页面：

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

 选择时间后，返回时间：

 代码部分：三个页面（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~收

这篇关于微信小程序弹出框-时间选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！