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>