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>
属性及方法
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 | 当用户单击“清除”按钮时触发 |