前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕
目录
DeepSeek 助力 Vue 开发：打造丝滑的日期选择器（Date Picker），未使用第三方插件
📘编写路由 src\router\index.js
📘编写展示入口 src\App.vue
📚页面效果
📚自己部署 DeepSeek 安装地址
📚相关文章
📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣
DeepSeek 助力 Vue 开发：打造丝滑的日期选择器（Date Picker），未使用第三方插件
📚前言
苏商银行同样在积极应用 DeepSeek。应用 DeepSeek VL2 多模态模型处理非标材料，如表格、影像资料、文档图片等识别，提升信贷材料综合识别准确率至 97%，并将 DeepSeek R1 推理模型集成到自主研发的 “开发助手”，使核心系统迭代周期缩短 30%。此外，苏商银行将 DeepSeek 的蒸馏技术应用于信贷风控、反欺诈等 20 多个场景，使尽调报告生成效率提升 40%，欺诈风险标签准确率提升 35% 。
这些应用案例表明，DeepSeek 在金融领域的智能合同质检、信贷风控、自动化估值对账等场景中，能够通过对海量金融数据的挖掘与分析，实现金融语义理解准确率与业务效率的双突破，重塑金融服务模式。
📚进入安装好的DeepSeek
0基础3步部署自己的DeepSeek安装步骤
打开搭建好的DeepSeek应用。
进入应用。
📚页面效果
📚指令输入
已经创建好了一个基于Vue3的组合式API的项目(Composition API)，并能正常运行起来，请帮我用 Vue3的组合式API(Composition API) 生成一个 日期选择器（Date Picker） 的功能组件，所有代码都保存在components/DatePicker 下的文件夹中。功能组件的script标签中只有setup属性，使用普通 JavaScript 实现,不使用TypeScript。
功能要有，如下属性：
属性（Props）
事件（Events）
你有更好的建议也可以添加，要注明。组件定义好后给出3个及以上的调用示例。
下面是现有目录
vueAndDeepseek/
├── src/ # 源代码目录
│ ├── assets/ # 静态资源
│ │ ├── base.css
│ │ ├── main.css
│ │ └── logo.svg
│ ├── components/ # 组件目录
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ ├── WelcomeItem.vue
│ │ ├── Progress/
│ │ │ └── Progress.vue
│ │ ├── Accordion/
│ │ ├── BackToTop/
│ │ ├── Card/
│ │ ├── InfiniteScroll/
│ │ ├── Notification/
│ │ ├── Timeline/
│ │ ├── Switch/
│ │ ├── Tabs/
│ │ ├── Sidebar/
│ │ ├── Breadcrumbs/
│ │ ├── MasonryLayout/
│ │ ├── Rating/
│ │ ├── DatePicker/
│ │ └── icons/
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── stores/ # Pinia 状态管理
│ │ └── counter.js
│ ├── views/ # 页面组件
│ │ ├── ProgressView.vue
│ │ ├── TabsView.vue
│ │ ├── SwitchView.vue
│ │ ├── TimelineView.vue
│ │ ├── NotificationView.vue
│ │ ├── CardView.vue
│ │ ├── InfiniteScrollView.vue
│ │ ├── BackToTopView.vue
│ │ ├── AccordionView.vue
│ │ ├── SidebarView.vue
│ │ ├── BreadcrumbsView.vue
│ │ ├── MasonryLayoutView.vue
│ │ ├── RatingView.vue
│ │ ├── DatePickerView.vue
│ │ └── AboutView.vue
│ ├── App.vue # 根组件
│ └── main.js # 应用入口
├── public/ # 公共资源目录
├── index.html # HTML 模板
├── package.json # 项目配置
├── vite.config.js # Vite 配置
└── node_modules/ # 依赖包目录
📘组件代码，src\components\DatePicker\DatePicker.vue
ref, computed, watch } from 'vue' // Props 定义 const props = defineProps({ modelValue: {type: [Date, Array, null], default: null }, minDate: {type: Date, default: null }, maxDate: {type: Date, default: null }, format: {type: String, default: 'YYYY-MM-DD' }, disabled: {type: Boolean, default: false }, placeholder: {type: String, default: '请选择日期' }, firstDayOfWeek: {type: Number, default: 1 }, showWeekNumbers: {type: Boolean, default: false }, isRange: {type: Boolean, default: false }, locale: {type: [String, Object], default: 'zh-CN' }, isInline: {type: Boolean, default: false }, className: {type: String, default: '' }, showConfirmButton: {type: Boolean, default: true }, confirmText: {type: String, default: '确认' }, disableDate: {type: Function, default: () => false } }) const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'open', 'close', 'invalid']) // 初始化状态 const currentDate = ref(new Date()) const selectedDate = ref(props.isRange ? [] : null) const isOpen = ref(props.isInline) // 格式化单个日期 const formatSingleDate = (date) => { if (!(date instanceof Date) || isNaN(date.getTime())) return '' const year = date.getFullYear() const month = String(date.getMonth() + 1).padStart(2, '0') const day = String(date.getDate()).padStart(2, '0') return props.format .replace('YYYY', year) .replace('MM', month) .replace('DD', day) } // 格式化显示日期 const formattedDate = computed(() => { if (!selectedDate.value) return '' if (Array.isArray(selectedDate.value)) {return selectedDate.value .map(date => date instanceof Date ? formatSingleDate(date) : '') .filter(Boolean) .join(' - ') } return formatSingleDate(selectedDate.value) }) // 日历数据 const calendarDays = computed(() => { const year = currentDate.value.getFullYear() const month = currentDate.value.getMonth() const firstDay = new Date(year, month, 1) const lastDay = new Date(year, month + 1, 0) const days = [] const firstDayOfWeek = firstDay.getDay() const prevMonthDays = (firstDayOfWeek - props.firstDayOfWeek + 7) % 7 // 上月日期 for (let i = prevMonthDays; i > 0; i--) {const date = new Date(year, month, 1 - i) days.push({ date, isCurrentMonth: false, isDisabled: isDateDisabled(date) }) } // 当月日期 for (let i = 1; i const date = new Date(year, month, i) days.push({ date, isCurrentMonth: true, isDisabled: isDateDisabled(date) }) } // 下月日期 const remainingDays = 42 - days.length for (let i = 1; i const date = new Date(year, month + 1, i) days.push({ date, isCurrentMonth: false, isDisabled: isDateDisabled(date) }) } return days }) // 星期标题 const weekDays = computed(() => { const days = ['日', '一', '二', '三', '四', '五', '六'] return [...days.slice(props.firstDayOfWeek), ...days.slice(0, props.firstDayOfWeek)] }) // 判断日期是否禁用 const isDateDisabled = (date) => { if (!(date instanceof Date)) return true if (props.minDate && date props.maxDate) return true return props.disableDate(date) } // 选择日期 const selectDate = (day) => { if (!day.date || day.isDisabled) {emit('invalid', { reason: 'date disabled' }) return } const newDate = new Date(day.date) if (props.isRange) {if (!Array.isArray(selectedDate.value)) { selectedDate.value = [] } if (selectedDate.value.length === 0 || selectedDate.value.length === 2) { selectedDate.value = [newDate] } else { selectedDate.value = [selectedDate.value[0], newDate].sort((a, b) => a - b) } } else {selectedDate.value = newDate } emit('update:modelValue', selectedDate.value) emit('change', { value: selectedDate.value, isValid: true }) } // 切换月份 const changeMonth = (delta) => { currentDate.value = new Date( currentDate.value.getFullYear(), currentDate.value.getMonth() + delta, 1 ) } // 确认选择 const confirm = () => { emit('confirm', selectedDate.value) isOpen.value = false emit('close') } // 切换日历显示 const toggleCalendar = () => { if (props.disabled) return isOpen.value = !isOpen.value emit(isOpen.value ? 'open' : 'close') } // 监听数据变化 watch(() => props.modelValue, (newVal) => { if (props.isRange) {selectedDate.value = Array.isArray(newVal) ? newVal.map(d => d instanceof Date ? new Date(d) : null) : [] } else {selectedDate.value = newVal instanceof Date ? new Date(newVal) : null } }, { immediate: true })" _ue_custom_node_="true"><{{ currentDate.getFullYear() }}年 {{ currentDate.getMonth() + 1 }}月">>{{ day }} {{ day.date.getDate() }}{{ confirmText }} display: inline-block; position: relative; } input { padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; width: 200px; cursor: pointer; } .calendar { position: absolute; top: 100%; left: 0; margin-top: 5px; background: white; border: 1px solid #dcdfe6; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); z-index: 1000; } .calendar-header { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #ebeef5; } .calendar-weeks { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; border-bottom: 1px solid #ebeef5; } .week-day { padding: 8px; color: #606266; } .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 8px; } .calendar-day { padding: 8px; text-align: center; cursor: pointer; color: #606266; } .calendar-day:hover:not(.is-disabled) { background-color: #f5f7fa; } .is-current-month { color: #303133; } .is-selected { background-color: #409eff; color: white; } .is-disabled { color: #c0c4cc; cursor: not-allowed; background-color: #f5f7fa; } .calendar-footer { padding: 8px; text-align: right; border-top: 1px solid #ebeef5; } button { padding: 6px 12px; background: #409eff; border: none; border-radius: 4px; color: white; cursor: pointer; } button:hover { background: #66b1ff; } .is-inline { position: static; margin-top: 0; }" _ue_custom_node_="true">📘调用 src\views\DatePickerView.vue
ref } from 'vue' import DatePicker from '../components/DatePicker/DatePicker.vue' // 初始化状态 const basicDate = ref(null) const rangeDate = ref(null) const disabledDate = ref(null) const customDate = ref(null) const inlineDate = ref(null) const limitedDate = ref(null) // 日期范围 const minDate = new Date('2024-01-01') const maxDate = new Date('2024-12-31') // 格式化函数 const formatDate = (date) => { if (!date) return '未选择' if (Array.isArray(date)) {if (!date.length) return '未选择' return date .map(d => {if (!d) return '' return d instanceof Date ? d.toLocaleDateString('zh-CN', {year: 'numeric', month: '2-digit', day: '2-digit' }) : '' }) .filter(Boolean) .join(' - ') } return date instanceof Date ? date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }) : '未选择' } // 禁用周末 const isWeekend = (date) => { if (!(date instanceof Date)) return false const day = date.getDay() return day === 0 || day === 6 } // 事件处理 const handleChange = ({ value, isValid }) => { console.log('日期变化:', formatDate(value), '是否有效:', isValid) } const handleConfirm = (date) => { alert(`确认选择:${formatDate(date)}`) }" _ue_custom_node_="true">基础用法选中值: {{ formatDate(basicDate) }}日期范围选中值: {{ formatDate(rangeDate) }}禁用周末选中值: {{ formatDate(disabledDate) }}自定义格式选中值: {{ formatDate(customDate) }}限制可选日期范围选中值: {{ formatDate(limitedDate) }}内联显示选中值: {{ formatDate(inlineDate) }} padding: 20px; max-width: 800px; margin: 0 auto; } .demo-block { margin-bottom: 30px; padding: 20px; border: 1px solid #ebeef5; border-radius: 4px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .demo-block1{ margin-top: 300px; } h3 { margin-bottom: 15px; font-size: 18px; color: #333; font-weight: 500; } .demo-value { margin-top: 10px; padding: 10px; background: #f5f7fa; border-radius: 4px; font-size: 14px; color: #666; border: 1px solid #e4e7ed; }" _ue_custom_node_="true">📚代码测试
正常
📚测试代码正常跑通，附其他基本代码
添加路由
页面展示入口
📘编写路由 src\router\index.js
import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'progress', component: () => import('../views/ProgressView.vue'), }, { path: '/tabs', name: 'tabs', // route level code-splitting // this generates a separate chunk (About.[hash].js) for this route // which is lazy-loaded when the route is visited. // 标签页（Tabs） component: () => import('../views/TabsView.vue'), }, { path: '/accordion', name: 'accordion', // 折叠面板（Accordion） component: () => import('../views/AccordionView.vue'), }, { path: '/timeline', name: 'timeline', // 时间线（Timeline） component: () => import('../views/TimelineView.vue'), }, { path: '/backToTop', name: 'backToTop', component: () => import('../views/BackToTopView.vue') }, { path: '/notification', name: 'notification', component: () => import('../views/NotificationView.vue') }, { path: '/card', name: 'card', component: () => import('../views/CardView.vue') }, { path: '/infiniteScroll', name: 'infiniteScroll', component: () => import('../views/InfiniteScrollView.vue') }, { path: '/switch', name: 'switch', component: () => import('../views/SwitchView.vue') }, { path: '/sidebar', name: 'sidebar', component: () => import('../views/SidebarView.vue') }, { path: '/breadcrumbs', name: 'breadcrumbs', component: () => import('../views/BreadcrumbsView.vue') }, { path: '/masonryLayout', name: 'masonryLayout', component: () => import('../views/masonryLayoutView.vue') }, { path: '/rating', name: 'rating', component: () => import('../views/RatingView.vue') }, { path: '/datePicker', name: 'datePicker', component: () => import('../views/DatePickerView.vue') } ], }) export default router📘编写展示入口 src\App.vue
RouterLink, RouterView } from 'vue-router' import HelloWorld from './components/HelloWorld.vue'" _ue_custom_node_="true">ProgressTabsAccordionTimelineBackToTopNotificationCardInfiniteScrollSwitchSidebarBreadcrumbsMasonryLayoutRatingDatePicker line-height: 1.5; max-height: 100vh; } .logo { display: block; margin: 0 auto 2rem; } nav { width: 100%; font-size: 12px; text-align: center; margin-top: 2rem; } nav a.router-link-exact-active { color: var(--color-text); } nav a.router-link-exact-active:hover { background-color: transparent; } nav a { display: inline-block; padding: 0 1rem; border-left: 1px solid var(--color-border); } nav a:first-of-type { border: 0; } @media (min-width: 1024px) { header {display: flex; place-items: center; padding-right: calc(var(--section-gap) / 2); } .logo {margin: 0 2rem 0 0; } header .wrapper {display: flex; place-items: flex-start; flex-wrap: wrap; } nav {text-align: left; margin-left: -1rem; font-size: 1rem; padding: 1rem 0; margin-top: 1rem; } }" _ue_custom_node_="true">📚页面效果
📚自己部署 DeepSeek 安装地址
蓝耘元生代智算云平台地址:https://cloud.lanyun.net/#/registerPage?promoterCode=07100c37a0
📚相关文章
———— 相 关 文 章 ———— 到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。
更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作
参数：Date | Date[] | null
说明：选中日期变化时触发（用于 v-model 同步）。
change
参数：Date | Date[] | null
说明：点击确认按钮时触发。
open
参数：无
说明：日历面板关闭时触发。
invalid
参数：{ reason: string }
说明：用户输入或选择无效日期时触发。
参数：无
说明：日历面板打开时触发。
close
参数：{ value: Date | Date[] | null, isValid: boolean }
说明：日期变化时触发，附带有效性校验。
confirm
类型：Date | Date[] | null
默认值：null
说明：绑定的日期值（支持 v-model，范围选择时为数组）。
minDate
类型：Date | null
默认值：null
说明：最大可选日期，晚于此日期的选项被禁用。
format
类型：boolean
默认值：false
说明：是否禁用组件。
placeholder
类型：number（0-6，0=周日）
默认值：1（周一）
说明：周起始日。
showWeekNumbers
类型：boolean
默认值：false
说明：是否为范围选择模式（modelValue 为 Date[]）。
locale
类型：boolean
默认值：false
说明：是否内联显示日历面板（无需点击输入框）。
className
类型：boolean
默认值：true
说明：是否显示确认按钮。
confirmText
类型：(date: Date) => boolean
默认值：() => false
说明：动态禁用日期（返回 true 表示禁用）。
类型：string
默认值：'确认'
说明：确认按钮文本。
disableDate
类型：string
默认值：''
说明：自定义容器类名。
showConfirmButton
类型：string | object
默认值：'en'
说明：本地化配置（语言、月份名等）。
isInline
类型：boolean
默认值：false
说明：是否显示周数。
isRange
类型：string
默认值：'请选择日期'
说明：输入框占位符文本。
firstDayOfWeek
类型：string
默认值：'YYYY-MM-DD'
说明：日期显示格式（如 YYYY-MM-DD、MM/DD/YYYY）。
disabled
类型：Date | null
默认值：null
说明：最小可选日期，早于此日期的选项被禁用。
maxDate
**属性（Props）**
**事件（Events）**
📘组件代码，src\components\DatePicker\DatePicker.vue
📘调用 src\views\DatePickerView.vue
📚代码测试
📚测试代码正常跑通，附其他基本代码
📚前言
📚进入安装好的DeepSeek
📚页面效果
📚指令输入
0基础3步部署自己的DeepSeek安装步骤
DeepSeek 助力 Vue 开发：打造丝滑的步骤条（Step bar）
DeepSeek 助力 Vue 开发：打造丝滑的进度条（Progress Bar）
自己部署 DeepSeek 助力 Vue 开发：打造丝滑的标签页（Tabs）
自己部署 DeepSeek 助力 Vue 开发：打造丝滑的折叠面板（Accordion）
自己部署 DeepSeek 助力 Vue 开发：打造丝滑的时间线（Timeline ）
DeepSeek 助力 Vue 开发：打造丝滑的返回顶部按钮（Back to Top）
DeepSeek 助力 Vue 开发：打造丝滑的通知栏（Notification Bar）
DeepSeek 助力 Vue 开发：打造丝滑的卡片（Card）
DeepSeek 助力 Vue 开发：打造丝滑的无限滚动（Infinite Scroll）
DeepSeek 助力 Vue 开发：打造丝滑的开关切换（Switch）
DeepSeek 助力 Vue 开发：打造丝滑的侧边栏（Sidebar）
DeepSeek 助力 Vue 开发：打造丝滑的面包屑导航（Breadcrumbs）
DeepSeek 助力 Vue 开发：打造丝滑的瀑布流布局（Masonry Layout）
DeepSeek 助力 Vue 开发：打造丝滑的评分组件（Rating）
update:modelValue
modelValue
