You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

是否有提供浏览器构建版本、可直接通过CDN引入的Vue3日期选择器?

可用的支持CDN直接引入的Vue3日期选择器方案
  • Element Plus DatePicker
    作为主流的Vue3全量UI框架,Element Plus提供完整的UMD CDN构建包,内置的日期选择器功能完整,和旧版vuejs-datepicker的常用功能对齐,支持日期范围选择、禁用日期、自定义格式等需求。
    引入使用示例:
    <!-- 引入Vue3和Element Plus资源 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    
    <!-- 组件使用 -->
    <div id="app">
      <el-date-picker v-model="date" type="date" placeholder="选择日期" />
    </div>
    
    <script>
      const app = Vue.createApp({
        data() {
          return { date: '' }
        }
      })
      app.use(ElementPlus)
      app.mount('#app')
    </script>
    
  • 无UI框架依赖的轻量选择器
    如果你不想引入完整UI框架,可以选择@vuepic/vue-datepicker,它专门提供了浏览器可用的UMD构建版本,CDN引入后即可直接注册使用,体积更小,功能覆盖了旧版vuejs-datepicker的绝大多数特性。
    基础使用示例:
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/@vuepic/vue-datepicker@latest/dist/vue-datepicker.iife.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@vuepic/vue-datepicker@latest/dist/main.css">
    
    <div id="app">
      <date-picker v-model="date"></date-picker>
    </div>
    
    <script>
      const app = Vue.createApp({
        components: { DatePicker: VueDatePicker },
        data() {
          return { date: '' }
        }
      })
      app.mount('#app')
    </script>
    
  • PrimeVue Calendar
    如果你偏好Prime生态的组件,PrimeVue的Calendar日期组件也提供全量CDN构建版本,可直接引入使用,支持高度自定义样式和交互逻辑。

内容的提问来源于stack exchange,提问作者John Moore

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.28 10:45:04