van-datetime-picker 设置默认时间

目录

 一、绑定的默认值类型 

1、代码

2、问题的发生以及解决过程

3、总结

4、效果展示

二、两个时间选择器绑定的值必须是不同的，不能共用

1、代码

2、问题的发生以及解决过程

3、总结

4、展示

 三、最后

---

 一、绑定的默认值类型 

1、代码

 ---HTML---
<van-field
    readonly
    clickable       
    name="date"
    :value="query.model.hour" class="search"
    label="查询时间"
    placeholder="点击选择时间"
    @click="showTime = true"
/>
<van-popup v-model="showTime" position="bottom">
    <van-datetime-picker
    type="datehour" title="选择年月日小时"
    @cancel="showTime = false"
    :value="times"
    @confirm="onConfirmTime"
    />
</van-popup>

2、问题的发生以及解决过程

当初写代码是参考的van表单里的市价选择器的写法，这个写法里面van-datetime-picker中不需要绑定值，后面要求设置默认值后才加进去，然后下拉选项不是默认值，就感觉很离谱，仔细看了一下van-datetime-picker的文档，发现初始值使用mew Data()设置的，试了一下果然如此！然后可以在van-datetime-pickerd的@confirm处进行数据处理，在filed处绑定处理后的其他值就可以展示为自己想要展示的时间样式了！

3、总结

在van-datetime-picker中用:value或者v-model绑定上值，注意此时默认的值必须是new Date()，即Fri Aug 26 2022 10:14:42 GMT+0800 (中国标准时间)，否则点击下拉的时候是不会展示默认值的！！

4、效果展示

 

二、两个时间选择器绑定的值必须是不同的，不能共用

1、代码

<van-popup v-model="showTime" position="bottom">
    <van-datetime-picker
    type="datehour" title="选择年月日小时"
    @cancel="showTime = false"
    :value="times"
    @confirm="onConfirmTime"
    />

-------------------------------------------

<van-popup v-model="showTime" position="bottom">
    <van-datetime-picker
    type="datehour" title="选择年月日"
    @cancel="showTime = false"
    :value="time"
    @confirm="onConfirmTime"
    />

2、问题的发生以及解决过程

解决了上面的问题，我为了方便就用了同一个值，好家伙，发现第二个van-datetime-picker死活绑不上去，然而第一个完全没问题。试了试新设定一个值，然后就就解决了。。。。

3、总结

不同的时间组件不能绑定同一个值

4、展示

 三、最后

谨以此记录一下，ε=(´ο｀*)))唉

又是在犯蠢的一天，(ｷ｀ﾟДﾟ´)!!