vant-日期使用
1、DatePicker.vue
<template> <div> <van-field v-model="result" v-bind="$attrs" readonly is-link @click="show = !show" /> <van-popup v-model="show" position="bottom"> <van-datetime-picker show-postal type="date" :formatter="formatter" :title="$attrs.label" @cancel="show = !show" @confirm="onConfirm" @change="changeFn" /> </van-popup> </div> </template> <script> export default { model: { prop: "selectValue" }, props: { columns: { type: Array }, selectValue: { type: String } }, data() { return { show: false, result: this.selectValue }; }, methods: { onConfirm(value) { this.result = this.timeFormat(value); this.show = !this.show; }, timeFormat(time) { // 时间格式化 2019-09-08 let year = time.getFullYear(); let month = time.getMonth() + 1; let day = time.getDate(); return year + '-' + month + '-' + day; }, // 选项格式化函数 formatter (type, value) { if (type === 'year') { return `${value}年` } else if (type === 'month') { return `${value}月` } else if (type === 'day') { return `${value}日` } else if (type === 'hour') { return `${value}时` } else if (type === 'minute') { return `${value}分` } else if (type === 'second') { return `${value}秒` } return value }, changeFn() { // 值变化是触发 // this.result = this.result }, }, watch: { selectValue: function(newVal) { this.result = newVal; }, result(newVal) { this.$emit("input", newVal); } } }; </script> <style></style>
2、父组件引用
<date-picker :label="item.label" placeholder="请选择" v-model="dataList[item.name]" :required="item.mandatory" :rules="[{ required: item.mandatory, message: '请选择'+item.label}]" />
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 葡萄城 AI 搜索升级:DeepSeek 加持,客户体验更智能
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏