微信小程序开发项目中,或多或少要使用时间选择器picker实现日期选择。选择开始日期和结束日期
而且选择开始时间后,选择结束时间,能够选择的日期不能比开始日期还要早。要实现以上效果可这样写:
在wxml中写
<view class="ranges all">
<view class="picker-title">日期范围:</view>
<!-- 时间段 -->
<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=='结束日期'?'text-style1':'text-style2'}}">{
{enddate}}</text>
</view>
</picker>
</view>
</view>
在wxss样式中写
.ranges {
display: flex;
align-items: center;
padding-left: 10rpx;
background-color: #fff;
}
.all {
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;
}
在js中写
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,
})
},
此文章为搬运,原文地址:http://news.558idc.com/449691.html