小程序 时间筛选

 <view class="date">
    <view class='pay_time'>{{payTime}}</view>
    <view class='time_choose'>
      <picker mode="date" value="{{dateBefore}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateBeforeChange">
        <view class="picker">{{dateBefore}}</view>
      </picker>
    </view>
    <view class='line'>-- </view>
    <view class='time_choose'>
      <picker mode="date" value="{{dateAfter}}" start="2015-09-01" end="2018-09-01" bindchange="bindDateAfterChange">
        <view class="picker">{{dateAfter}}</view>
      </picker>
    </view>
  </view>

.date{
  display: flex;
  flex-flow: row nowrap;
  padding: 20rpx;
}
.date>view:first-child{
  font-size: 30rpx;
}
.date>view:nth-child(2){
  margin-left: 30rpx;
}
.pay_time{
  line-height: 35rpx;
  font-size: 32rpx;
  padding-top: 10rpx;
}
.picker{
 border:3rpx solid #515151;
 padding: 10rpx;
 background-color: #FFFFFF;
 width: 180rpx;
 height: 40rpx;
 font-size: 30rpx;
}

data: {
    payTime:"缴费日期:",
    dateBefore: "2018-01-01",
    dateAfter: "2018-01-01",
  },
  /*时间选择器 */
  bindDateBeforeChange: function (e) {
    this.setData({
      dateBefore: e.detail.value
    })
  }, 
  bindDateAfterChange: function (e) {
    this.setData({
      dateAfter: e.detail.value
    })
  },

结果：