简单的微信小程序选择日期组件，复制即可使用
html页面代码
<view class="t_title">设置时间
<view class="start">
<view class="start-text">开始日期
<view class="start-data">
<picker mode="date" value="{{date_start}}" start="2017-09-01" end="2037-09-01" bindchange="bindDateStartChange">
<view class="picker">{{date_start}}
<view class="end"><view class="end-text">结束日期
<view class="end-data">
<picker mode="date" value="{{date_end}}" start="2017-09-01" end="2037-09-01" bindchange="bindDateEndChange">
<view class="picker">{{date_end}}
点击时间选择日期（点击事件）
//结束时间
bindDateEndChange: function (e) {
this.setData({
date_end: e.detail.value
})
},
//开始时间
bindDateStartChange: function (e) {
this.setData({
date_start: e.detail.value
})
},
日期数据（在data中设置日期数据）
data: {
date_start: '2022-03-29',//开始时间
date_end: '2022-03-30'//结束时间
}
css代码（部分）
.t_title{
position: relative;
font-size: 32rpx;
font-weight: 700;
color: #414966;
}
.t_title::before{
display: inline-block;
position: absolute;
top: 14rpx;
left: -26rpx;
content: "";
width: 15rpx;
height: 15rpx;
border: 5rpx solid #0078ff;
border-radius: 50%;
background-color: #fff;
}
.start,.end{
display: flex;
justify-content: start;
align-items: center;
}
.start{
margin-top: 89rpx;
}
.end{
margin-top: 36rpx;
}
.start-data,.end-data{
width: 436rpx;
height: 76rpx;
border: 3rpx solid #b3b5bd;
border-radius: 10rpx;
margin-left: 41rpx;
text-align: center;
line-height: 76rpx;
color: #414966;
}
.end-text,.start-text{
font-size: 28rpx;
color: #898ea3;
}
