在使用vant-ui Calendar日历组件时,遇到事件格式不对?遇到月,日,小于10时,不会自动加0?
解决方法:
html
<view class="timeinfo" bindtap="onDisplay">
<view class="nav" style="height: 110rpx;">
<span class="infoSize">申请起止时间:</span>
</view>
<view class="timebox" bindtap="onDisplay">
<span class="one">{{ startTime }}</span>
<span class="two">至</span>
<span class="one">{{ endTime }}</span>
</view>
</view>
<!-- van-calendar 记得放到html最后,不然会报错 层级问题 -->
<van-calendar show="{{ show }}" type="range" bind:close="close" bind:confirm="onConfirm" color="#07c160" />
css
.timeinfo {
display: flex;
flex-direction: column;
}
.nav{
display: flex;
align-items: center;
}
.infoSize {
font-size: 30rpx;
color: #333;
margin-left: 20rpx;
}
.timebox {
display: flex;
align-items: center;
justify-content: space-around;
height: 110rpx;
}
.one {
font-size: 30rpx;
color: #CCCCCC;
}
.two {
font-size: 30rpx;
color: #333;
}
js
onDisplay() {
this.setData({
show: true
});
},
onClose() {
this.setData({
show: false
})
},
formatDate(date) {
var time = new Date(date);
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
if (m < 10) {
m = 0 + '' + m;
}
if (d < 10) {
d = 0 + '' + d;
}
return y + "-" + m + "-" + d; //格式可以在这调整
},
onConfirm(event) {
const [start, end] = event.detail;
var startTime = this.formatDate(start)
var endTime = this.formatDate(end)
console.log(startTime,endTime,'dhsajd')
this.setData({
show: false,
startTime:startTime,
endTime:endTime
})
}
完成