From b4097c972929ffb32791e2ed98064d79669d7863 Mon Sep 17 00:00:00 2001 From: AmyFoxFN Date: Sun, 8 Apr 2018 15:37:01 +0800 Subject: [PATCH] docs(date-picker): english --- document/common/config/menu.json | 1 + document/components/docs/en-US/date-picker.md | 209 ++++++++++++++++++ document/components/docs/en-US/picker.md | 2 + document/components/docs/zh-CN/picker.md | 2 + 4 files changed, 214 insertions(+) create mode 100644 document/components/docs/en-US/date-picker.md diff --git a/document/common/config/menu.json b/document/common/config/menu.json index 49c32c05..81aa28fa 100644 --- a/document/common/config/menu.json +++ b/document/common/config/menu.json @@ -46,6 +46,7 @@ "toast": "Toast", "picker": "Picker", "cascade-picker": "CascadePicker", + "date-picker": "DatePicker", "time-picker": "TimePicker", "segment-picker": "SegmentPicker", "dialog": "Dialog", diff --git a/document/components/docs/en-US/date-picker.md b/document/components/docs/en-US/date-picker.md new file mode 100644 index 00000000..018ee5bb --- /dev/null +++ b/document/components/docs/en-US/date-picker.md @@ -0,0 +1,209 @@ +## DatePicker + +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. + +__Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first. + +### Example + +- Basic usage + + 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. + + ```html + Date Picker + ``` + ```js + export default { + mounted () { + this.datePicker = this.$createDatePicker({ + title: 'Date Picker', + min: new Date(2008, 7, 8), + max: new Date(2020, 9, 20), + value: new Date(), + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + }, + methods: { + showDatePicker() { + this.datePicker.show() + }, + selectHandle(date, selectedVal, selectedText) { + this.$createDialog({ + type: 'warn', + content: `Selected Item:
- date: ${date}
- value: ${selectedVal.join(', ')}
- text: ${selectedText.join(' ')}`, + icon: 'cubeic-alert' + }).show() + }, + cancelHandle() { + this.$createToast({ + type: 'correct', + txt: 'Picker canceled', + time: 1000 + }).show() + } + } + } + ``` + +- Column configuration + + 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". + + ```html + Time Picker + ``` + ```js + export default { + mounted () { + this.timePicker = this.$createDatePicker({ + title: 'Time Picker', + min: new Date(2008, 7, 8, 8, 0, 0), + max: new Date(2008, 7, 8, 20, 59, 59), + value: new Date(2008, 7, 8, 12, 30, 30), + startColumn: 'hour', + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + }, + methods: { + showTimePicker() { + this.timePicker.show() + }, + selectHandle(date, selectedVal, selectedText) { + this.$createDialog({ + type: 'warn', + content: `Selected Item:
- date: ${date}
- value: ${selectedVal.join(', ')}
- text: ${selectedText.join(' ')}`, + icon: 'cubeic-alert' + }).show() + }, + cancelHandle() { + this.$createToast({ + type: 'correct', + txt: 'Picker canceled', + time: 1000 + }).show() + } + } + } + ``` + +- year-month-date-hour-minute-second + + Similarly, if you want year-month-date-hour-minute-second picker, just "six columns" starting from "year" + + ```html + Date Time Picker + ``` + ```js + export default { + mounted () { + this.dateTimePicker = this.$createDatePicker({ + title: 'Date Time Picker', + min: new Date(2008, 7, 8, 8, 0, 0), + max: new Date(2020, 9, 20, 20, 59, 59), + value: new Date(), + columnCount: 6, + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + }, + methods: { + showDateTimePicker() { + this.dateTimePicker.show() + }, + selectHandle(date, selectedVal, selectedText) { + this.$createDialog({ + type: 'warn', + content: `Selected Item:
- date: ${date}
- value: ${selectedVal.join(', ')}
- text: ${selectedText.join(' ')}`, + icon: 'cubeic-alert' + }).show() + }, + cancelHandle() { + this.$createToast({ + type: 'correct', + txt: 'Picker canceled', + time: 1000 + }).show() + } + } + } + ``` + +- `$updateProps` + + 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. + + ```html + Use $updateProps + ``` + ```js + export default { + mounted () { + this.updatePropsPicker = this.$createDatePicker({ + title: 'Use $updateProps', + min: new Date(2008, 7, 8), + max: new Date(2020, 9, 20), + value: new Date(), + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + }, + methods: { + showUpdatePropsPicker() { + this.updatePropsPicker.show() + setTimeout(() => { + this.updatePropsPicker.$updateProps({ + title: 'updated', + value: new Date(2010, 9, 1) + }) + }, 1000) + }, + selectHandle(date, selectedVal, selectedText) { + this.$createDialog({ + type: 'warn', + content: `Selected Item:
- date: ${date}
- value: ${selectedVal.join(', ')}
- text: ${selectedText.join(' ')}`, + icon: 'cubeic-alert' + }).show() + }, + cancelHandle() { + this.$createToast({ + type: 'correct', + txt: 'Picker canceled', + time: 1000 + }).show() + } + } + } + ``` + +### Props configuration + +| Attribute | Description | Type | Accepted Values | Default | Example | +| - | - | - | - | - | - | +| min | the minimum value of optional range | Date, Array | - | new Date(2010, 1, 1) | new Date(2008, 7, 8) | +| max | the maximum value of optional range | Date, Array | - | new Date(2020, 12, 31) | new Date(2020, 9, 20) | +| value | current selected Date | Date, Array | - | the minimum value of optional range | new Date() | +| startColumn | the start column | String | year/month/date/hour/minute/second| year | hour | +| columnCount | the count of column | Number | - | 3 | 6 | +| title | 标题 | String | - | '' | - | +| cancelTxt | the text of the cancel button | String | - | '取消' | - | +| confirmTxt | the text of the confirm button | String | - | '确定' | - | +| swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | - | 2500 | - | +| alias | configure the alias of `value` and `text` | Object | - | {} | { value: 'id', text: 'name'} | + +### Events + +| Event Name | Description | Parameters 1 | Parameters 2 | Parameters 3 | +| - | - | - | - | - | +| select | triggers when clicking the confirm button | date: Date, the selected date | selectedVal: Array, the selected value | selectedText: Array, the selected text | +| cancel | triggers when clicking the cancel button | - | - | +| change | triggers when the roller scrolls | index: Number, index of current scrolling roller | selectedIndex: Number, index of selected item in current column | + +### Methods + +| Method name | Description | +| - | - | +| show | show picker | +| hide | hide picker | diff --git a/document/components/docs/en-US/picker.md b/document/components/docs/en-US/picker.md index dfd3774e..b5c71b9c 100644 --- a/document/components/docs/en-US/picker.md +++ b/document/components/docs/en-US/picker.md @@ -210,3 +210,5 @@ __Notice:__ Cause this component used create-api, so you should read [create-api | Method name | Description | Parameters 1 | Parameters 2 | | - | - | - | - | | 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 | +| show | show picker | - | - | +| hide | hide picker | - | - | diff --git a/document/components/docs/zh-CN/picker.md b/document/components/docs/zh-CN/picker.md index 5cffadda..ba8f3084 100644 --- a/document/components/docs/zh-CN/picker.md +++ b/document/components/docs/zh-CN/picker.md @@ -210,3 +210,5 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请 | 方法名 | 说明 | 参数1 | 参数2 | | - | - | - | - | | setData | 设置picker可选项 | picker每列可选项的文案和值，Array类型 | picker每列选中的索引，Array类型 | +| show | 显示选择器 | - | - | +| hide | 隐藏选择器 | - | - | -- GitLab