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

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

 

使用

<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> 

　　

属性及方法

Prop	Description	Type	Default
v-model	控制日期	Date/Array	--
name	name for input	String	--
type	输入类型（内联/普通）	String	normal
inputClass	输入的自定义类名	String	--
popupClass	弹出式菜单的自定义类名	String	--
disabled	确定是否禁用日期选取器	Boolean	false
clearable	清除日期	Boolean	false
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	显示取消/提交按钮	Boolean	false
placeholder	输入的占位符	String	--

事件

Event Name	Description	Parameters
confirm	当用户确认时触发	值组件的绑定值
cancel	当用户单击“取消”按钮时触发	--
clear	当用户单击“清除”按钮时触发