在微信小程序使用picker实现日期选择

Ccousin

已于 2023-03-15 16:07:09 修改

阅读量4k

点赞数

CC 4.0 BY-SA版权

文章标签：微信小程序小程序前端

于 2023-03-15 10:25:31 首次发布

Ccousin

本文链接：https://blog.csdn.net/weixin_47600678/article/details/129545530

本文介绍了在微信小程序开发中如何使用picker组件实现日期选择功能，包括选择开始和结束日期，并确保结束日期不能早于开始日期。通过在wxml、wxss和js中的相应代码配置来达成这一目标。

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

微信小程序开发项目中，或多或少要使用时间选择器picker实现日期选择。选择开始日期和结束日期

在这里插入图片描述
而且选择开始时间后，选择结束时间，能够选择的日期不能比开始日期还要早。要实现以上效果可这样写：
在wxml中写

<view class="ranges all">
                <view class="picker-title">日期范围:</view>
                <!-- 时间段 -->  
                    <view class="picker_group">  
                    <picker mode="date" value="{{startdate}}"  end="{{enddate}}" bindchange="bindDateChange">  
                        <view class="picker">  
                        <text class = "{{startdate=='开始日期'?'text-style1':'text-style2'}}">{{startdate}}</text>
                        </view>  
                    </picker>  
                    <text class = "text-style1">~</text> 
                    <picker mode="date" value="{{enddate}}" start="{{startdate}}" end="2050-01-01" bindchange="bindDateChange2">  
                        <view class="picker">  
                        <text class = "{{enddate=='结束日期'?'text-style1':'text-style2'}}">{{enddate}}</text> 
                        </view>  
                    </picker>        
      </view>  
</view>

在wxss样式中写


.ranges {
  display: flex;
  align-items: center;
  padding-left: 10rpx;
  background-color: #fff;
}
.all {
  margin-top: 30rpx;
}
.picker-title {
  font-size: 32rpx;
  width: 150rpx;
}
.picker_group {
  color: #888;
  border: 1rpx solid #A4A6AE;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  font-size: 32rpx;
}
.text-style1{
  color:#A4A6AE;
}
.text-style2{
  color:rgb(0,0,0,0.8);
}
.picker_group picker {
  font-size: 34rpx;
  height: 45rpx;
  padding-left:20rpx;
  padding-right:20rpx;
  line-height: 45rpx;
}

在js中写

bindDateChange(e) {
    let that = this;
    console.log(e.detail.value)
    that.setData({
      startdate: e.detail.value,
    })
  },
  bindDateChange2(e) {
    let that = this;
    console.log(e.detail.value)
    that.setData({
      enddate: e.detail.value,
    })
  },

此文章为搬运，原文地址：http://news.558idc.com/449691.html