微信小程序如何實(shí)現(xiàn)日期范圍選擇

本篇內(nèi)容介紹了“微信小程序如何實(shí)現(xiàn)日期范圍選擇”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

樣式如下：

分別點(diǎn)擊開始日期和結(jié)束日期選擇時(shí)間（底部彈框）：

date.wxml:

 <view class="range-style mar-top">
                <view class="picker-title">日期范圍:</view>
                <!-- 時(shí)間段 -->  
                    <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=='結(jié)束日期'?'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: '開始日期',//默認(rèn)起始時(shí)間  
    enddate: '結(jié)束日期',//默認(rèn)結(jié)束時(shí)間 
 
  },
 
  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,
    })
  },
 
})

“微信小程序如何實(shí)現(xiàn)日期范圍選擇”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！