废话少说 直接贴代码
wxml:
<van-cell is-link>
<view slot="title">{{date ? date : '选择日期'}}</view>
</van-cell>
<van-calendar id="my-calendar" range="{{true}}" min-date="{{ minDate }}" show="{{ show }}" default-date="{{ defaultDate }}" type="range" bind:close="onClose" bind:confirm="onConfirm" />
js:
Component({
/**
* 组件的初始数据
*/
data: {
date: '', //选中日期
defaultDate: [], // 默认日期
minDate: new Date(2023, 0, 1).getTime(),
show: false,
},
lifetimes: {
//小程序进入页面执行 (Component组件的生命周期)
attached() {
this.setData({
minDate: new Date(2023, 0, 1).getTime(),
defaultDate: [new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000).getTime(), new Date().getTime()],
})
},
},
})
总结:
①: 要有一个minDate 最小可选日期,要不然无法选择之前的时间文章来源：https://www.toymoban.com/news/detail-786795.html
②: defaultDate（数组）： 绑定为时间戳,，[ 起始时间，截止时间 ] ，转换时间戳时要再次getTime（）否则设定默认时间失败！！！重点！！！文章来源地址https://www.toymoban.com/news/detail-786795.html
到了这里，关于微信小程序使用vant calendar日历组件 default-date 默认选中的日期无效?的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
