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	當用戶單擊“清除”按鈕時觸發