Skip to content

Commit e5c9f35

Browse files
AmyFoxFNAmyFoxFN
committed
docs(date-picker): english
1 parent 41be36e commit e5c9f35

File tree

4 files changed

+214
-0
lines changed

4 files changed

+214
-0
lines changed

‎document/common/config/menu.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
"toast": "Toast",
4747
"picker": "Picker",
4848
"cascade-picker": "CascadePicker",
49+
"date-picker": "DatePicker",
4950
"time-picker": "TimePicker",
5051
"segment-picker": "SegmentPicker",
5152
"dialog": "Dialog",

‎document/components/docs/en-US/date-picker.md‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
## DatePicker
2+
3+
DatePicker can be used to choose date, which has flexible configuration for time granularity, such as year - month - date, hour - minute - second, year - month - date - hour - minute - second, year - month, etc.
4+
5+
__Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first.
6+
7+
### Example
8+
9+
- Basic usage
10+
11+
You can create a component instance by `$createDatePicker`, and configure `min`, `max` to set the selected date range. the `value` could use to set the current selected date.
12+
13+
```html
14+
<cube-button @click="showDatePicker">Date Picker</cube-button>
15+
```
16+
```js
17+
export default {
18+
mounted () {
19+
this.datePicker = this.$createDatePicker({
20+
title: 'Date Picker',
21+
min: new Date(2008, 7, 8),
22+
max: new Date(2020, 9, 20),
23+
value: new Date(),
24+
onSelect: this.selectHandle,
25+
onCancel: this.cancelHandle
26+
})
27+
},
28+
methods: {
29+
showDatePicker() {
30+
this.datePicker.show()
31+
},
32+
selectHandle(date, selectedVal, selectedText) {
33+
this.$createDialog({
34+
type: 'warn',
35+
content: `Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
36+
icon: 'cubeic-alert'
37+
}).show()
38+
},
39+
cancelHandle() {
40+
this.$createToast({
41+
type: 'correct',
42+
txt: 'Picker canceled',
43+
time: 1000
44+
}).show()
45+
}
46+
}
47+
}
48+
```
49+
50+
- Column configuration
51+
52+
Though column configuration, `DatePicker` get the power of flexible time granularity. There are six columns in total: year, month, date, hour, minute and second. You can configure the starting column and the count of columns by `startColumn` and `columnCount`, such as the default "year - month - date" picker is "three column" starting from "year", and "hour - minute - second" picker is the "three column" starting from "time".
53+
54+
```html
55+
<cube-button @click="showTimePicker">Time Picker</cube-button>
56+
```
57+
```js
58+
export default {
59+
mounted () {
60+
this.timePicker = this.$createDatePicker({
61+
title: 'Time Picker',
62+
min: new Date(2008, 7, 8, 8, 0, 0),
63+
max: new Date(2008, 7, 8, 20, 59, 59),
64+
value: new Date(2008, 7, 8, 12, 30, 30),
65+
startColumn: 'hour',
66+
onSelect: this.selectHandle,
67+
onCancel: this.cancelHandle
68+
})
69+
},
70+
methods: {
71+
showTimePicker() {
72+
this.timePicker.show()
73+
},
74+
selectHandle(date, selectedVal, selectedText) {
75+
this.$createDialog({
76+
type: 'warn',
77+
content: `Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
78+
icon: 'cubeic-alert'
79+
}).show()
80+
},
81+
cancelHandle() {
82+
this.$createToast({
83+
type: 'correct',
84+
txt: 'Picker canceled',
85+
time: 1000
86+
}).show()
87+
}
88+
}
89+
}
90+
```
91+
92+
- year-month-date-hour-minute-second
93+
94+
Similarly, if you want year-month-date-hour-minute-second picker, just "six columns" starting from "year"
95+
96+
```html
97+
<cube-button @click="showDateTimePicker">Date Time Picker</cube-button>
98+
```
99+
```js
100+
export default {
101+
mounted () {
102+
this.dateTimePicker = this.$createDatePicker({
103+
title: 'Date Time Picker',
104+
min: new Date(2008, 7, 8, 8, 0, 0),
105+
max: new Date(2020, 9, 20, 20, 59, 59),
106+
value: new Date(),
107+
columnCount: 6,
108+
onSelect: this.selectHandle,
109+
onCancel: this.cancelHandle
110+
})
111+
},
112+
methods: {
113+
showDateTimePicker() {
114+
this.dateTimePicker.show()
115+
},
116+
selectHandle(date, selectedVal, selectedText) {
117+
this.$createDialog({
118+
type: 'warn',
119+
content: `Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
120+
icon: 'cubeic-alert'
121+
}).show()
122+
},
123+
cancelHandle() {
124+
this.$createToast({
125+
type: 'correct',
126+
txt: 'Picker canceled',
127+
time: 1000
128+
}).show()
129+
}
130+
}
131+
}
132+
```
133+
134+
- `$updateProps`
135+
136+
With the `$updateProps` method, you can modify the properties of component instances created by createAPI. For example, in `DatePicker`, we can modify the value of `value` attribute to change the date currently selected.
137+
138+
```html
139+
<cube-button @click="showUpdatePropsPicker">Use $updateProps</cube-button>
140+
```
141+
```js
142+
export default {
143+
mounted () {
144+
this.updatePropsPicker = this.$createDatePicker({
145+
title: 'Use $updateProps',
146+
min: new Date(2008, 7, 8),
147+
max: new Date(2020, 9, 20),
148+
value: new Date(),
149+
onSelect: this.selectHandle,
150+
onCancel: this.cancelHandle
151+
})
152+
},
153+
methods: {
154+
showUpdatePropsPicker() {
155+
this.updatePropsPicker.show()
156+
setTimeout(() => {
157+
this.updatePropsPicker.$updateProps({
158+
title: 'updated',
159+
value: new Date(2010, 9, 1)
160+
})
161+
}, 1000)
162+
},
163+
selectHandle(date, selectedVal, selectedText) {
164+
this.$createDialog({
165+
type: 'warn',
166+
content: `Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
167+
icon: 'cubeic-alert'
168+
}).show()
169+
},
170+
cancelHandle() {
171+
this.$createToast({
172+
type: 'correct',
173+
txt: 'Picker canceled',
174+
time: 1000
175+
}).show()
176+
}
177+
}
178+
}
179+
```
180+
181+
### Props configuration
182+
183+
| Attribute | Description | Type | Accepted Values | Default | Example |
184+
| - | - | - | - | - | - |
185+
| min | the minimum value of optional range | Date, Array | - | new Date(2010, 1, 1) | new Date(2008, 7, 8) |
186+
| max | the maximum value of optional range | Date, Array | - | new Date(2020, 12, 31) | new Date(2020, 9, 20) |
187+
| value | current selected Date | Date, Array | - | the minimum value of optional range | new Date() |
188+
| startColumn | the start column | String | year/month/date/hour/minute/second| year | hour |
189+
| columnCount | the count of column | Number | - | 3 | 6 |
190+
| title | 标题 | String | - | '' | - |
191+
| cancelTxt | the text of the cancel button | String | - | '取消' | - |
192+
| confirmTxt | the text of the confirm button | String | - | '确定' | - |
193+
| swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | - | 2500 | - |
194+
| alias | configure the alias of `value` and `text` | Object | - | {} | { value: 'id', text: 'name'} |
195+
196+
### Events
197+
198+
| Event Name | Description | Parameters 1 | Parameters 2 | Parameters 3 |
199+
| - | - | - | - | - |
200+
| select | triggers when clicking the confirm button | date: Date, the selected date | selectedVal: Array, the selected value | selectedText: Array, the selected text |
201+
| cancel | triggers when clicking the cancel button | - | - |
202+
| change | triggers when the roller scrolls | index: Number, index of current scrolling roller | selectedIndex: Number, index of selected item in current column |
203+
204+
### Methods
205+
206+
| Method name | Description |
207+
| - | - |
208+
| show | show picker |
209+
| hide | hide picker |

‎document/components/docs/en-US/picker.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,3 +210,5 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
210210
| Method name | Description | Parameters 1 | Parameters 2 |
211211
| - | - | - | - |
212212
| setData | set options in picker| Array, texts and values of options of each columns of picker | Array, indexes of selected item in each column of picker |
213+
| show | show picker | - | - |
214+
| hide | hide picker | - | - |

‎document/components/docs/zh-CN/picker.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,3 +210,5 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
210210
| 方法名 | 说明 | 参数1 | 参数2 |
211211
| - | - | - | - |
212212
| setData | 设置picker可选项 | picker每列可选项的文案和值，Array类型 | picker每列选中的索引，Array类型 |
213+
| show | 显示选择器 | - | - |
214+
| hide | 隐藏选择器 | - | - |

0 commit comments

Comments
 (0)