本篇文章主要為大家講述關(guān)于在微信小程序中如何實(shí)現(xiàn)日期范圍的選擇。

　　具體樣式如下：

　　分別點(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,
　　})
　　},
　　})

　　全部?jī)?nèi)容已講述完畢，歡迎大家關(guān)注更多后續(xù)精彩內(nèi)容。