微信小程序的日期选择器的使用（picker）

最新推荐文章于 2025-06-14 14:18:53 发布

我就是DaLing呀！

最新推荐文章于 2025-06-14 14:18:53 发布

阅读量4.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签：微信小程序 picker

本文链接：https://blog.youkuaiyun.com/weixin_42418774/article/details/98747230

本文详细介绍如何在微信小程序中实现动态添加日期选择器，并确保每个选择器的日期独立不重复。通过定义数据结构、使用wxml布局及绑定事件，实现了下拉选择重复方式后弹出日期选择器的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先可以去官方API看看组件：

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

需求：主要页面，点击重复方式，弹出js里面的数据，选择指定日期时，显示第三张图片：

点击加号可以加view框，点击view框就弹出日期选择器：（记得每个框的日期是不一样的哦！）

（1）先在js里面定义数据：（在data里面写）

  data: {
    lists: [{inx:0,date:''}],
    selectData: ['每天', '每周', '每年', '指定日期', '自定义(每隔N天)'],//下拉列表的数据
}

（2）我的弹出选择器：wxml

   <van-cell is-link catchtap='selectTap'>
    <view slot="title" class='content'>
      <view class="van-cell-text">重复方式</view>
      <view class='text_color'>{{selectData[index]}}</view>
    </view>
  </van-cell>
<van-popup show="{{ show }}" position="bottom" overlay="{{ false }}" >
    <text class='select_text'>重复方式</text>
    <view class='option' style='{{index==selectData.length-1&&"border:0;"}}' wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' catchtap='optionTap'>{{item}}</view>
  </van-popup>

（3）上面代码里面的catchtap='optionTap'以及catchtap='selectTap'的js代码：

 // 点击下拉显示框
  selectTap() {
    this.setData({
      show: !this.data.show
    });
  },

// 点击下拉列表
  optionTap(e) {
    let Index = e.currentTarget.dataset.index;//获取点击的下拉列表的下标
    this.setData({
      index: Index,
      show: !this.data.show
    });
  },

（4）当选中指定日期的选项的wxml布局样式:

<view wx:if="{{selectData[index]=='指定日期'}}">
    <!-- <view class="wayDetails">
        <text style='margin-bottom:18rpx;margin-left:1rpx;'>提醒日期选择：</text>
    </view> -->
    <view class='mention'>
        <view class="remind">
          <text class='advanceTxt' >指定日期</text>
            <block wx:for="{{lists}}" wx:key="{{index}}">
              <picker mode="date" data-inx="{{index}}" value="{{item.date}}" start="2019-01-01" end="2030-12-30" bindchange="bindDatechange">  
                <view class="timedata">{{item.date}}</view>  
//点击view就弹出日期选择器，然后就把选择的日期填入了view中
              </picker> 
            </block>
            <image bindtap='addinput' class="img" src="/imgs/jia.png"></image>
//view后面有一个加号，可以点击不断的加view
        </view>
    </view>
</view>

（5）上面的bindchange="bindDatechange"以及bindtap='addinput'的js的代码：

 //  点击日期组件确定事件
  bindDatechange:function(e) {
    let inx = e.currentTarget.dataset.inx;
    let obj =this.data.lists[inx];
    obj.date = e.detail.value;  
    console.log(e.detail.value)
    this.setData({
      lists:this.data.lists,
    })   
  },


 addinput: function () {
    var lists = this.data.lists;
    var newData = {inx:lists.length,date:''};
    lists.push(newData);//实质是添加lists数组内容，使for循环多一次
    this.setData({
      lists: lists,
    })
  },

我遇到了对象的问题，选择日期，结果每个框都是一样的日期，后面请教了大佬，大佬帮我解决了！！！！