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