Vue2的一个漂亮的Datepicker组件
丁晋
vue-datepicker-local (vue-datepicker-local)
A Beautiful Datepicker Component For Vue2.
Vue2的一个漂亮的Datepicker组件。
Lightweight (less than 5kb minified and gzipped)
轻量级(压缩并压缩后少于5kb)
Only dependencies Vue
仅依赖Vue
Beautiful!
美丽！
用法 (Usage)
安装 (Install)
$ npm install vue-datepicker-localES6 (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>浏览器全局 (Browser globals)
The dist folder contains vue-datepicker-local.js and vue-datepicker-local.css.
dist文件夹包含vue-datepicker-local.js和vue-datepicker-local.css 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>道具 (Props)
| Prop | Description | Type | Default |
|---|---|---|---|
| v-model | dates to be manipulated | Date/Array | -- |
| name | name for input | String | -- |
| type | type for input (inline/normal) | String | normal |
| inputClass | custom class name for input | String | -- |
| popupClass | custom class name for popup | String | -- |
| disabled | determine whether the DatePicker is disabled | Boolean | false |
| clearable | clear the date | Boolean | false |
| rangeSeparator | range separator | String | "~" |
| format | to set the date format | String | "YYYY-MM-DD" |
| local | the local of the DatePicker | Object | { dow: 1, // Monday is the first day of the week hourTip: '选择小时', // tip of select hour minuteTip: '选择分钟', // tip of select minute secondTip: '选择秒数', // tip of select second yearSuffix: '年', // format of head monthsHead: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split(''), // months of head months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(''), // months of panel weeks: '一_二_三_四_五_六_日'.split('_'), // weeks cancelTip: '取消', // default text for cancel button , submitTip: '提交' // default text for submit button } |
| disabledDate | specify the date that cannot be selected | Function | ()=>{return false} |
| showButtons | show Cancel/Submit buttons | Boolean | false |
| Struts | 描述 | 类型 | 默认 |
|---|---|---|---|
| 模型 | 要操纵的日期 | 日期/数组 | - |
| 名称 | 输入名称 | 串 | - |
| 类型 | 输入类型(内联/常规) | 串 | 正常 |
| inputClass | 输入的自定义类名称 | 串 | - |
| popupClass | 弹出窗口的自定义类名称 | 串 | - |
| 残障人士 | 确定是否禁用了DatePicker | 布尔型 | 假 |
| 可清除的 | 清除日期 | 布尔型 | 假 |
| rangeSeparator | 范围分隔符 | 串 | “〜” |
| 格式 | 设置日期格式 | 串 | “ YYYY-MM-DD” |
| 本地 | DatePicker的本地 | 目的 | { 道琼斯工业平均指数：1，//星期一是一周的第一天 hourTip：'选择小时'，//选择小时的提示 minutesTip：'选择分钟'，//选择分钟的提示 secondTip：'选择秒数'，//选择秒的提示 yearSuffix：'年'，//头格式 monthsHead：'1月_ 2月_ 3月_ 4月_ 5月_ 6月_ 7月_ 8月_ 9月_ 10月_ 11月_ 12月'.split(' ')，//头 月：'一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(' ')，//小组讨论月 周：'一_二_三_四_五_六_日'.split('_')，//周 cancelTip：'取消'，//取消按钮的默认文本 ，SubmitTip：'提交'//提交按钮的默认文本 } |
| 禁用日期 | 指定无法选择的日期 | 功能 | ()=> {返回false} |
| showButtons | 显示取消/提交按钮 | 布尔型 | 假 |
大事记 (Events)
| Event Name | Description | Parameters |
|---|---|---|
| confirm | triggers when user confirms | the value component's binding value |
| 活动名称 | 描述 | 参量 |
|---|---|---|
| 确认 | 当用户确认时触发 | 值组件的绑定值 |
翻译自: https://vuejsexamples.com/a-beautiful-datepicker-component-for-vue2/
类似资料：