Skip to content

Commit 0465f2e

Browse files
mengxiong10mengxiong10
authored
Merge pull request #230 from mengxiong10/dev
docs: update docs
2 parents e0c4385 + 74e718d commit 0465f2e

File tree

2 files changed

+153
-163
lines changed

2 files changed

+153
-163
lines changed

‎README.md

Lines changed: 65 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,17 @@ export default {
4141
time1: '',
4242
time2: '',
4343
time3: '',
44+
// custom lang
45+
lang: {
46+
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
47+
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
48+
pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
49+
placeholder: {
50+
date: 'Select Date',
51+
dateRange: 'Select Date Range'
52+
}
53+
},
54+
// custom range shortcuts
4455
shortcuts: [
4556
{
4657
text: 'Today',
@@ -64,38 +75,39 @@ export default {
6475
<date-picker v-model="time1" :first-day-of-week="1"></date-picker>
6576
<date-picker v-model="time2" type="datetime" :time-picker-options="timePickerOptions"></date-picker>
6677
<date-picker v-model="time3" range :shortcuts="shortcuts"></date-picker>
78+
<date-picker v-model="value" :lang="lang"></date-picker>
6779
</div>
6880
</template>
6981
```
7082
### Props
7183

72-
| Prop | Type | Accepted Values | Default | Description |
73-
|---------------------|---------------|-----------------|-------------|-----------------------------------------------------|
74-
| type | String | date/datetime/year/month/time | 'date' | select date type |
75-
| range | Boolean | — | false | if true, the type is daterange or datetimerange |
76-
| format | String | — | YYYY-MM-DD | The parsing tokens are similar to the moment.js |
77-
| value-type | String/Object | date/format/timestamp | 'date' | type of binding value. If not specified, the binding value will be a Date object(see [detail](#value-type)) |
78-
| lang | String/Object | en/zh/es/pt-br/fr/ru/de/it/cs | zh | Translation (set [how to custom](#lang)) |
79-
| clearable | Boolean | — | true | if false, don't show the clear icon |
80-
| confirm | Boolean | — | false | if true, need click the button to change the value |
81-
| editable | Boolean | — | true | if false, user cann't type it |
82-
| disabled | Boolean | — | false | Disable the component |
83-
| placeholder | String | — | | input placeholder text |
84-
| width | String/Number | — | 210 | input size |
85-
| append-to-body | Boolean | — | false | append the popup to body |
86-
| popupStyle | Object | — | | popup style(override the top, left style) |
87-
| not-before | String/Date | — | '' | Disable all dates before new Date(not-before) |
88-
| not-after | String/Date | — | '' | Disable all dates after new Date(not-after) |
89-
| disabled-days | Array/function| — | [] | Disable Days |
90-
| shortcuts | Boolean/Array | — | true | the shortcuts for the range picker |
91-
| time-picker-options | Object | — | {} | set timePickerOptions(start, step, end) |
92-
| minute-step | Number | 0 - 60 | 0 | if > 0 don't show the second picker |
93-
| first-day-of-week | Number | 1 - 7 | 7 | set the first day of week |
94-
| input-class | String | — | 'mx-input' | the input class name |
95-
| input-attr | Object | — | | the input attr(eg: { required: true, id: 'input'}) |
96-
| confirm-text | String | — | 'OK' | the default text to display on confirm button |
97-
| range-separator | String | — | '~' | the range separator text |
98-
| date-format | String | — | '' | format the time header and tooltip |
84+
| Prop | Description | Type | Default |
85+
|------|--------------|-------|---------|
86+
| type | select date type | 'date' \| 'datetime' \| 'year' \| 'month' \| 'time' | 'date' |
87+
| range | if true, the type is daterange or datetimerange | `boolean` | false |
88+
| format | format the Date. The parsing tokens are similar to the moment.js | [token](https://github.com/taylorhakes/fecha#formatting-tokens) | 'YYYY-MM-DD' |
89+
| value-type | type of binding value. If not specified, the binding value will be a Date object | [value-type](#value-type) | 'date' |
90+
| lang | Translation | [lang](#lang) | 'zh' |
91+
| clearable | if false, don't show the clear icon | `boolean` | true |
92+
| confirm | if true, need click the button to change the value | `boolean` | false |
93+
| editable | if false, user cann't type it | `boolean` | true |
94+
| disabled | Disable the component | `boolean` | false |
95+
| placeholder | input placeholder text | `string` | — |
96+
| width | input size | `string`\|`number` | 210 |
97+
| append-to-body | append the popup to body | `boolean` | false |
98+
| popupStyle | popup style(override the top, left style) | `object` | — |
99+
| not-before | Disable all dates before new Date(not-before) | `string`\|`Date` | ''|
100+
| not-after | Disable all dates after new Date(not-after) | `string`\|`Date`| '' |
101+
| disabled-days | Disable Days | `(date) => boolean` | - |
102+
| shortcuts | the shortcuts for the range picker | [shortcuts](#shortcuts) | true |
103+
| time-picker-options | custom time-picker | [time-picker-options](#time-picker-options) | null |
104+
| minute-step | if > 0 don't show the second picker | 0 - 60 | 0 |
105+
| first-day-of-week | set the first day of week | 1 - 7 | 7 |
106+
| input-class | the input class name | `string` | 'mx-input' |
107+
| input-attr | the input attr(eg: { required: true, id: 'input'}) | `object` | — |
108+
| confirm-text | the default text to display on confirm button | `string` | 'OK' |
109+
| range-separator | the range separator text | `string` | '~' |
110+
| date-format | format the time header and tooltip | `string` | '' |
99111

100112
#### value-type
101113
set the format of binding value
@@ -114,59 +126,29 @@ Advanced: You can also customize objects to implement two functions.
114126
}
115127

116128
```
117-
118129
#### lang
119-
* String (en/zh/es/pt-br/fr/ru/de/it/cs)
120-
* Object (custom)
121130

122-
```html
123-
<script>
124-
export default {
125-
data() {
126-
return {
127-
value: '',
128-
lang: {
129-
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
130-
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
131-
pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
132-
placeholder: {
133-
date: 'Select Date',
134-
dateRange: 'Select Date Range'
135-
}
136-
}
137-
}
138-
}
139-
}
140-
</script>
141-
142-
<template>
143-
<date-picker v-model="value" :lang="lang"></date-picker>
144-
</template>
145-
146-
```
131+
| Type |
132+
|------|
133+
| 'en'\|'zh'\|'es'\|'pt-br'\|'fr'\|'ru'\|'de'\|'it'\|'cs' |
134+
| { days: string[]; months: string[]; picker: string[]; placeholder: { date: string; dateRange: string } } |
147135

148136
#### shortcuts
149-
* true - show the default shortcuts
150-
* false - hide the shortcuts
151-
* Object[] - custom shortcuts, [{text, start, end}]
152-
* Object[] - custom shortcuts, [{text, onClick}]
153-
154-
| Prop | Type | Description |
155-
|-----------------|---------------|------------------------|
156-
| text | String | Text |
157-
| start | Date | Start Date |
158-
| end | Date | End Date |
159-
| onClick | Function | click handler |
137+
the shortcuts for the range picker
160138

161-
#### time-picker-options
162-
* Object[] - custom time-picker, [{start, step, end}]
139+
| Value | Description |
140+
|-----------------|-------------|
141+
| true | show the default shortcuts |
142+
| false | hide the defaualt shortcuts |
143+
| [{text: string, onClick: () => any }] | custom shortcuts |
163144

164-
| Prop | Type | Description |
165-
|-----------------|---------------|------------------------|
166-
| start | String | startTime (eg '00:00') |
167-
| step | String | stepTime (eg '00:30') |
168-
| end | String | endTime (eg '23:30') |
145+
#### time-picker-options
146+
custom time-picker
169147

148+
| Type |
149+
|------|
150+
| {start: '00:00', step:'00:30' , end: '23:30'} |
151+
| () => Array<{ label: string; values: { hours: number; minutes: number } }> |
170152

171153
### Events
172154
| Name | Description | Callback Arguments |
@@ -176,11 +158,18 @@ export default {
176158
| confirm | When click 'confirm' button | the currentValue |
177159
| clear | When click 'clear' button | |
178160
| input-error | When user type a invalid Date | the input text |
179-
| panel-change | When change the panel view(eg: from year to month view)| panel, oldPanel |
161+
| panel-change | When change the panel view(eg: from year to month view)| [panel](#panel), [oldPanel](#panel) |
180162
| calendar-change | When calendar view year or month change | now(Date), oldNow(Date)|
181163

182-
#### panel value
183-
`['NONE', 'DATE', 'YEAR', 'MONTH', 'TIME']`
164+
#### panel
165+
166+
| Value | Description |
167+
|-------|----------------------|
168+
| NONE | when panel is closed |
169+
| DATE | when panel is date |
170+
| YEAR | when panel is year |
171+
| MONTH | when panel is month |
172+
| TIME | when panel is time |
184173

185174
### Slots
186175

0 commit comments

Comments
 (0)