当前位置：首页 > article >正文

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

article 2025/2/24 7:13:16

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

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

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.length
  for (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 true
  if (props.minDate && date < props.minDate) return true
  if (props.maxDate && 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 })
</script>

<template>
  <div :class="['date-picker', className]">
    <input
      type="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">
        <div
          v-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 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)}`)
}
</script>

<template>
  <div class="datepicker-demo">
    <!-- 基础示例 -->
    <section class="demo-block">
      <h3>基础用法</h3>
      <DatePicker
        v-model="basicDate"
        placeholder="请选择日期"
        @change="handleChange"
      />
      <div class="demo-value">选中值: {{ formatDate(basicDate) }}</div>
    </section>

    <!-- 日期范围选择 -->
    <section class="demo-block">
      <h3>日期范围</h3>
      <DatePicker
        v-model="rangeDate"
        :is-range="true"
        placeholder="请选择日期范围"
        @change="handleChange"
      />
      <div class="demo-value">选中值: {{ formatDate(rangeDate) }}</div>
    </section>

    <!-- 禁用周末 -->
    <section class="demo-block">
      <h3>禁用周末</h3>
      <DatePicker
        v-model="disabledDate"
        :disable-date="isWeekend"
        placeholder="请选择工作日"
        @change="handleChange"
      />
      <div class="demo-value">选中值: {{ formatDate(disabledDate) }}</div>
    </section>

    <!-- 自定义格式 -->
    <section class="demo-block">
      <h3>自定义格式</h3>
      <DatePicker
        v-model="customDate"
        format="MM/DD/YYYY"
        placeholder="月/日/年"
        @change="handleChange"
      />
      <div class="demo-value">选中值: {{ formatDate(customDate) }}</div>
    </section>

    <!-- 设置日期范围 -->
    <section class="demo-block" style="">
      <h3>限制可选日期范围</h3>
      <DatePicker
        v-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>
      <DatePicker
          v-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>