DeepSeek 助力 Vue 开发：打造丝滑的日期选择器（Date Picker），未使用第三方插件

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

共同探索软件研发！敬请关注【宝码香车】
关注描述

csdngif标识

DeepSeek 助力 Vue 开发：打造丝滑的日期选择器（Date Picker），未使用第三方插件
- 📚前言
- 📚进入安装好的DeepSeek
- 📚页面效果
- 📚指令输入
- - - **属性（Props）**
    - **事件（Events）**
  - 📘组件代码，src\components\DatePicker\DatePicker.vue
  - 📘调用 src\views\DatePickerView.vue
- 📚代码测试
- 📚测试代码正常跑通，附其他基本代码
- - 📘编写路由 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应用。

DeepSeek应用

进入应用。

进入DeepSeek应用

📚页面效果

页面效果

📚指令输入

已经创建好了一个基于Vue3的组合式API的项目(Composition API)，并能正常运行起来，请帮我用 Vue3的组合式API(Composition API) 生成一个日期选择器（Date Picker）的功能组件，所有代码都保存在components/DatePicker 下的文件夹中。功能组件的script标签中只有setup属性，使用普通 JavaScript 实现,不使用TypeScript。
功能要有，如下属性：

属性（Props）

modelValue
- 类型：Date | Date[] | null
- 默认值：null
- 说明：绑定的日期值（支持 v-model，范围选择时为数组）。
minDate
- 类型：Date | null
- 默认值：null
- 说明：最小可选日期，早于此日期的选项被禁用。
maxDate
- 类型：Date | null
- 默认值：null
- 说明：最大可选日期，晚于此日期的选项被禁用。
format
- 类型：string
- 默认值：'YYYY-MM-DD'
- 说明：日期显示格式（如 YYYY-MM-DD、MM/DD/YYYY）。
disabled
- 类型：boolean
- 默认值：false
- 说明：是否禁用组件。
placeholder
- 类型：string
- 默认值：'请选择日期'
- 说明：输入框占位符文本。
firstDayOfWeek
- 类型：number（0-6，0=周日）
- 默认值：1（周一）
- 说明：周起始日。
showWeekNumbers
- 类型：boolean
- 默认值：false
- 说明：是否显示周数。
isRange
- 类型：boolean
- 默认值：false
- 说明：是否为范围选择模式（modelValue 为 Date[]）。
locale
- 类型：string | object
- 默认值：'en'
- 说明：本地化配置（语言、月份名等）。
isInline
- 类型：boolean
- 默认值：false
- 说明：是否内联显示日历面板（无需点击输入框）。
className
- 类型：string
- 默认值：''
- 说明：自定义容器类名。
showConfirmButton
- 类型：boolean
- 默认值：true
- 说明：是否显示确认按钮。
confirmText
- 类型：string
- 默认值：'确认'
- 说明：确认按钮文本。
disableDate
- 类型：(date: Date) => boolean
- 默认值：() => false
- 说明：动态禁用日期（返回 true 表示禁用）。

事件（Events）

update:modelValue
- 参数：Date | Date[] | null
- 说明：选中日期变化时触发（用于 v-model 同步）。
change
- 参数：{ value: Date | Date[] | null, isValid: boolean }
- 说明：日期变化时触发，附带有效性校验。
confirm
- 参数：Date | Date[] | null
- 说明：点击确认按钮时触发。
open
- 参数：无
- 说明：日历面板打开时触发。
close
- 参数：无
- 说明：日历面板关闭时触发。
invalid
- 参数：{ reason: string }
- 说明：用户输入或选择无效日期时触发。

你有更好的建议也可以添加，要注明。组件定义好后给出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

<script setup>
import { 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 <= lastDay.getDate(); i++) {const date = new Date(year, month, i)days.push({date,isCurrentMonth: true,isDisabled: isDateDisabled(date)})}// 下月日期const remainingDays = 42 - days.lengthfor (let i = 1; i <= remainingDays; 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 trueif (props.minDate && date < props.minDate) return trueif (props.maxDate && date > props.maxDate) return truereturn 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 = falseemit('close')
}// 切换日历显示
const toggleCalendar = () => {if (props.disabled) returnisOpen.value = !isOpen.valueemit(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 })
</script><template><div :class="['date-picker', className]"><inputtype="text":placeholder="placeholder":value="formattedDate"@click="toggleCalendar"readonly:disabled="disabled"/><div v-if="isOpen || isInline" class="calendar"><div class="calendar-header"><button @click="changeMonth(-1)">&lt;</button><span>{{ currentDate.getFullYear() }}年 {{ currentDate.getMonth() + 1 }}月</span><button @click="changeMonth(1)">&gt;</button></div><div class="calendar-weeks"><div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div></div><div class="calendar-days"><divv-for="day in calendarDays":key="day.date.getTime()":class="['calendar-day',{'is-current-month': day.isCurrentMonth,'is-disabled': day.isDisabled,'is-selected': selectedDate && (Array.isArray(selectedDate) ? selectedDate.some(d => d && d.getTime() === day.date.getTime()): selectedDate.getTime() === day.date.getTime())}]"@click="selectDate(day)">{{ day.date.getDate() }}</div></div><div v-if="showConfirmButton" class="calendar-footer"><button @click="confirm">{{ confirmText }}</button></div></div></div>
</template><style scoped>
.date-picker {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;
}
</style>

📘调用 src\views\DatePickerView.vue

<script setup>
import { 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 falseconst day = date.getDay()return day === 0 || day === 6
}// 事件处理
const handleChange = ({ value, isValid }) => {console.log('日期变化:', formatDate(value), '是否有效:', isValid)
}const handleConfirm = (date) => {alert(`确认选择:${formatDate(date)}`)
}
</script><template><div class="datepicker-demo"><!-- 基础示例 --><section class="demo-block"><h3>基础用法</h3><DatePickerv-model="basicDate"placeholder="请选择日期"@change="handleChange"/><div class="demo-value">选中值: {{ formatDate(basicDate) }}</div></section><!-- 日期范围选择 --><section class="demo-block"><h3>日期范围</h3><DatePickerv-model="rangeDate":is-range="true"placeholder="请选择日期范围"@change="handleChange"/><div class="demo-value">选中值: {{ formatDate(rangeDate) }}</div></section><!-- 禁用周末 --><section class="demo-block"><h3>禁用周末</h3><DatePickerv-model="disabledDate":disable-date="isWeekend"placeholder="请选择工作日"@change="handleChange"/><div class="demo-value">选中值: {{ formatDate(disabledDate) }}</div></section><!-- 自定义格式 --><section class="demo-block"><h3>自定义格式</h3><DatePickerv-model="customDate"format="MM/DD/YYYY"placeholder="月/日/年"@change="handleChange"/><div class="demo-value">选中值: {{ formatDate(customDate) }}</div></section><!-- 设置日期范围 --><section class="demo-block" style=""><h3>限制可选日期范围</h3><DatePickerv-model="limitedDate":min-date="minDate":max-date="maxDate"placeholder="选择2024年日期"@change="handleChange"@confirm="handleConfirm"/><div class="demo-value">选中值: {{ formatDate(limitedDate) }}</div></section><!-- 内联显示 --><section class="demo-block1"><h3>内联显示</h3><DatePickerv-model="inlineDate":is-inline="true"@change="handleChange"/><div class="demo-value">选中值: {{ formatDate(inlineDate) }}</div></section></div>
</template><style scoped>
.datepicker-demo {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;
}
</style>

📚代码测试

正常

📚测试代码正常跑通，附其他基本代码

添加路由
页面展示入口

📘编写路由 src\router\index.js

$\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

$src\App.vue$

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script><template><header><img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" /><nav><RouterLink to="/">Progress</RouterLink><RouterLink to="/tabs">Tabs</RouterLink><RouterLink to="/accordion">Accordion</RouterLink><RouterLink to="/timeline">Timeline</RouterLink><RouterLink to="/backToTop">BackToTop</RouterLink><RouterLink to="/notification">Notification</RouterLink><RouterLink to="/card">Card</RouterLink><RouterLink to="/infiniteScroll">InfiniteScroll</RouterLink><RouterLink to="/switch">Switch</RouterLink><RouterLink to="/sidebar">Sidebar</RouterLink><RouterLink to="/breadcrumbs">Breadcrumbs</RouterLink><RouterLink to="/masonryLayout">MasonryLayout</RouterLink><RouterLink to="/rating">Rating</RouterLink><RouterLink to="/datePicker">DatePicker</RouterLink></nav></div></header><RouterView />
</template><style scoped>
header {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;}
}
</style>