Vue2 日期选择组件 vue-datepicker-local

最新推荐文章于 2025-05-27 10:35:33 发布

天空中的小虾米

最新推荐文章于 2025-05-27 10:35:33 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue插件文章标签： Vue插件日期插件

本文链接：https://blog.youkuaiyun.com/weixin_42595573/article/details/89591013

Vue插件专栏收录该内容

1 篇文章

订阅专栏

本文介绍Vue2的一款高效日期选择组件vue-datepicker-local，它具有轻量级、仅依赖Vue的特点。提供ES6模块和浏览器全局两种引入方式，压缩包小于4kb。使用时只需将相应的js和css文件引入项目，并参考官方文档进行配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue2一个漂亮的日期选择组件：

仅依赖于Vue

轻量级（小于4kb的压缩包）

使用
安装

$ npm install vue-datepicker-local

ES6

<template>
  <vue-datepicker-local v-model="time" />
</template>

<script>
import VueDatepickerLocal from 'vue-datepicker-local'

export default {
  components: {
    VueDatepickerLocal
  },
  data () {
    return {
      time: new Date()
    }
  }
}
</script>

浏览器全局
dist文件夹包含了 vue -datepicker- local.js 和 vue-datepicker-local.css。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="path/to/vue-datepicker-local.css">
</head>
<body>
  <div id="app">
    <vue-datepicker-local v-model="time"></vue-datepicker-local>
  </div>
  <script src="path/to/vue.js"></script>
  <script src="path/to/vue-datepicker-local.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        time: new Date()
      }
    })
  </script>
</body>
</html>

项目中引入:

<vue-datepicker-local v-model="form.entryDate" style="width: 370px;"></vue-datepicker-local>

官方网站:

https://weifeiyue.github.io/vue-datepicker-local/