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

2019-03-231523次阅读vue

Vue2的一个漂亮的日期选择器组件vue-datepicker-local,轻量化(小于5KB小型化和gzipped),仅依赖关系Vue。

npm网址:

https://www.npmjs.com/package/vue-datepicker-local

Demo:

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

用法:

安装

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>

属性及方法

PropDescriptionTypeDefault
v-model控制日期Date/Array--
namename for inputString--
type

输入类型(内联/普通)

Stringnormal
inputClass

输入的自定义类名

String--
popupClass弹出式菜单的自定义类名String--
disabled

确定是否禁用日期选取器

Booleanfalse
clearable

清除日期

Booleanfalse
rangeSeparator范围分隔符String"~"
format

设置日期格式

String"YYYY-MM-DD"
local设置本地日期格式Object{
dow: 1, //星期一是一周的第一天
hourTip: '选择小时', //选择小时提示
minuteTip: '选择分钟', // 选择分钟提示
secondTip: '选择秒数', // 选择秒数提示
yearSuffix: '年', // 头部年格式
monthsHead: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split(''), // 头部月格式
months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('
'), // 月面板
weeks: '一_二_三_四_五_六_日'.split('_'), // 周
cancelTip: '取消', // 取消按钮的默认文本 
, submitTip: '提交' // 提交按钮的默认文本
}
disabledDate

指定无法选择的日期

Function(time, format)=>{return false}
showButtons

显示取消/提交按钮

Booleanfalse
placeholder

输入的占位符

String--

事件

Event NameDescriptionParameters
confirm

当用户确认时触发

值组件的绑定值

cancel

当用户单击“取消”按钮时触发

--
clear

当用户单击“清除”按钮时触发

 
上一篇: css透明边框的弹窗制作  下一篇: #教程# 新版namecheap账户间域名Push转移  

Vue2 的日期选择组件 vue-datepicker-local相关文章