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

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

样式如下：

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

date.wxml:

 
                日期范围:
                  
                      
                      
                          
                        {{startdate}}
                          
                      
                    ~ 
                      
                          
                        {{enddate}} 
                          
                            
        

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

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