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

微信小程序开发项目中，或多或少要使用时间选择器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

来源地址：https://blog.csdn.net/weixin_47600678/article/details/129545530