UNPKG

9.18 kBMarkdownView Raw
1# @livelybone/vue-datepicker
2[![NPM Version](http://img.shields.io/npm/v/@livelybone/vue-datepicker.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/vue-datepicker)
3[![Download Month](http://img.shields.io/npm/dm/@livelybone/vue-datepicker.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/vue-datepicker)
4![gzip with dependencies: 25kb](https://img.shields.io/badge/gzip--with--dependencies-25kb-brightgreen.svg "gzip with dependencies: 25kb")
5![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
6![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")
7
8> `pkg.module supported`, 天然支持 tree-shaking, 使用 es module 引用即可
9
10[English Document](./README.md)
11
12A vue component of datepicker, includes DatePicker, DatetimePicker, DateRangePicker, TimePicker
13
14## repository
15https://github.com/livelybone/vue-datepicker.git
16
17## Demo
18https://livelybone.github.io/vue/vue-datepicker/
19
20## Run Example
21你可以通过运行项目的 example 来了解这个组件的使用，以下是启动步骤：
22
231. 克隆项目到本地 `git clone https://github.com/livelybone/vue-datepicker.git`
242. 进入本地克隆目录 `cd your-module-directory`
253. 安装项目依赖 `npm i`(使用 taobao 源: `npm i --registry=http://registry.npm.taobao.org`)
264. 启动服务 `npm run dev`
275. 在你的浏览器看 example (地址通常是 `http://127.0.0.1:3000/examples/test.html`)
28
29## Installation
30```bash
31npm i -S @livelybone/vue-datepicker
32```
33
34## Global name - The variable the module exported in `umd` bundle
35`VueDatepicker`
36
37## Interface
38去 [index.d.ts](./index.d.ts) 查看可用方法和参数
39
40## Usage
41```js
42import { Datepicker, Timepicker, DatetimePicker, DateRangePicker } from '@livelybone/vue-datepicker';
43
44// Global register
45Vue.component('datepicker', Datepicker);
46Vue.component('timepicker', Timepicker);
47Vue.component('datetime-picker', DatetimePicker);
48Vue.component('date-range-picker', DateRangePicker);
49
50// Local register
51new Vue({
52 components:{ Datepicker, Timepicker, DatetimePicker, DateRangePicker }
53})
54```
55
56在 HTML 文件中直接引用，你可以在 [CDN: unpkg](https://unpkg.com/@livelybone/vue-datepicker/lib/umd/) 看到你能用到的所有 js 脚本
57```html
58<-- 然后使用你需要的 -->
59<script src="https://unpkg.com/@livelybone/vue-datepicker/lib/umd/<--module-->.js"></script>
60```
61
62## Props
63
64### Common
65| Name | Type | DefaultValue | Description |
66| ------------------------- | ----------------------------------------- | -------------------------------------------- | ------------ |
67| `id` | `[String, Number]` | none | |
68| `value` | `[String, Number]` | none | |
69| `placeholder` | `String` | `请选择` | |
70| `min` | `String` | none | Min |
71| `max` | `String` | none | Max |
72| `canEdit` | `Boolean` | `true` | If it can be changed |
73| `inputStyle` | `Object` | none | Style of input tag |
74| `popperProps` | `Object` | `defaultPopperProps` | Props of module [@livelybone/vue-popper](https://github.com/livelybone/vue-popper) |
75| `scrollbarProps` | `Object` | `{ isMobile: false, maxHeight: 200 }` | Props of scrollbar, see [vue-scrollbar-live](https://github.com/livelybone/vue-scrollbar-live) |
76
77```js
78const defaultPopperProps = {
79 arrowPosition: 'start',
80 arrowOffsetScaling: 1,
81 popperOptions: {
82 placement: 'bottom-start',
83 positionFixed: true,
84 // more options in https://popper.js.org
85 },
86}
87```
88
89### Datepicker
90| Name | Type | DefaultValue | Description |
91| ------------------- | ------------ | -------------------------------------------- | ------------ |
92| `dayStr` | `Array` | `['日', '一', '二', '三', '四', '五', '六']` | Used to set day name |
93| `monthStr` | `Array` | `['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']` | Used to set month name |
94| `multiple` | `Boolean` | `false` | |
95| `type` | `String` | `date` | Options: [`year`,`month`,`date`] |
96| `firstDayOfWeek` | `Number` | `0` | Used to set the first day of week. Options: [0, 1, 2, 3, 4, 5, 6] |
97| `btnStr` | `String` | `确定` | Used to set text of button |
98
99### Timepicker
100| Name | Type | DefaultValue | Description |
101| ----------------- | ---------------------- | -------------------------------------------- | ------------ |
102| `type` | `String` | `second` | Options: [`hour`,`minute`,`second`] |
103| `timeStr` | `Array` | `['时', '分', '秒']` | Used to set time name |
104| `btnStr` | `String` | `确定` | Used to set text of button |
105
106### DatetimePicker
107| Name | Type | DefaultValue | Description |
108| ----------------- | ---------------------- | -------------------------------------------- | ------------ |
109| `dayStr` | `Array` | `['日', '一', '二', '三', '四', '五', '六']` | Used to set day name |
110| `monthStr` | `Array` | `['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']` | Used to set month name |
111| `timeStr` | `Array` | `['时', '分', '秒']` | Used to set time name |
112| `btnStr` | `String` | `确定` | Used to set text of button |
113| `firstDayOfWeek` | `Number` | `0` | Used to set the first day of week. Options: [0, 1, 2, 3, 4, 5, 6] |
114| `timeType` | `String` | `second` | Options: [`hour`,`minute`,`second`] |
115
116### DateRangePicker
117| Name | Type | DefaultValue | Description |
118| --------------------- | ---------------------- | -------------------------------------------- | ------------ |
119| `value` | `Array` | `[null, null]` | Used to set day name |
120| `dayStr` | `Array` | `['日', '一', '二', '三', '四', '五', '六']` | Used to set day name |
121| `monthStr` | `Array` | `['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']` | Used to set month name |
122| `btnStr` | `String` | `确定` | Used to set text of button |
123| `firstDayOfWeek` | `Number` | `0` | Used to set the first day of week. Options: [0, 1, 2, 3, 4, 5, 6] |
124| `secondPlaceholder` | `String` | `请选择结束` | |
125| `rangeSeparator` | `String` | `至` | |
126
127## Events
128| Name | EmittedData | Description |
129| --------------------- | --------------------- | ------------------------------------------------- |
130| `input` | `String` | |
131
132## style
133你可能需要主动引入样式文件来应用组件的样式：
134```js
135// scss
136import 'node_modules/@livelybone/vue-datepicker/lib/css/index.scss'
137
138// css
139import 'node_modules/@livelybone/vue-datepicker/lib/css/index.css'
140```
141Or
142```scss
143// scss
144@import 'node_modules/@livelybone/vue-datepicker/lib/css/index.scss'
145
146// css
147@import 'node_modules/@livelybone/vue-datepicker/lib/css/index.css'
148```
149
150你也可以通过引入自定义的组件样式文件来自定义样式，文件可以通过复制并修改 `node_modules/@livelybone/vue-datepicker/lib/css/index.scss` 得到
151
152## QA
153
1541. Error `Error: spawn node-sass ENOENT`
155
156> 你可能需要全局安装 node-sass，`npm i -g node-sass`