基本用法：
<template>
<van-datetime-picker v-model="selectedDate" />
</template>
<script>
export default {
data() {
return {
selectedDate: new Date()
};
}
};
</script>
在上述代码中，通过 v-model 双向绑定的方式，你可以获取用户选择的日期和时间。
自定义时间范围：
<template>
<van-datetime-picker
v-model="selectedDate"
:min-date="minDate"
:max-date="maxDate"
/>
</template>
<script>
export default {
data() {
return {
selectedDate: new Date(),
minDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 7),
maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 7)
};
}
};
</script>
通过设置 min-date 和 max-date 属性，你可以限制可选择的时间范围。
自定义日期格式：
<template>
<van-datetime-picker v-model="selectedDate" format="YYYY-MM-DD HH:mm" />
</template>
<script>
export default {
data() {
return {
selectedDate: new Date()
};
}
};
</script>
通过设置 format 属性，你可以自定义日期和时间的显示格式。
自定义弹出位置：
<template>
<van-datetime-picker
v-model="selectedDate"
:popup-style="{ bottom: '20%' }"
/>
</template>
<script>
export default {
data() {
return {
selectedDate: new Date()
};
}
};
</script>
通过设置 popup-style 属性，你可以自定义 DatetimePicker 的弹出位置。
选择时间段：
<template>
<van-datetime-picker v-model="selectedDate" type="time" />
</template>
<script>
export default {
data() {
return {
selectedDate: new Date()
};
}
};
</script>
通过设置 type 属性为 "time"，你可以只选择时间而不包含日期。
以上是一些 Vant3 DatetimePicker 时间选择器组件的基本用法。查阅 Vant3 的官方文档能够获取更详细的信息、配置选项和示例代码：[Vant3 DatetimePicker 时间选择器文档](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/datetime-picker)。
转载请注明出处：http://www.zyzy.cn/article/detail/5720/Vant