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

本文共计552个文字，预计阅读时间需要3分钟。

原文：“本文实例为大家庭分享了微信小程序实现日期范围选择的整体代码，供大家参考。具体内容如下+样式如下：+分别点击开始日期和结束日期选择时间（底部弹框）：+date.wxml：+

改写后：“本例展示如何使用微信小程序实现日期范围选择功能，代码如下，供大家参考。具体代码及样式：+点击选择起始和结束日期（底部弹出框）：+date.wxml：+

本文实例为大家分享了微信小程序实现日期范围选择的具体代码，供大家参考，具体内容如下

样式如下：

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

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,     })   },   })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。