微信小程序如何实现日期范围选择

本篇内容介绍了“微信小程序如何实现日期范围选择”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

样式如下：

分别点击开始日期和结束日期选择时间（底部弹框）：

date.wxml:

 <view class="range-style mar-top">                <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>

date.wxss:

.range-style {    display: flex;    align-items: center;    padding-left: 10rpx;    background-color: #fff;}.mar-top {    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;}

date.js:

Page({  data: {      startdate: '开始日期',//默认起始时间      enddate: '结束日期',//默认结束时间    },   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,    })  }, })

“微信小程序如何实现日期范围选择”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！