github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update date-picker demo

pull/165/head
tjz 2018-03-18 22:05:55 +08:00
parent 6933375351
commit 2b9a433db0
8 changed files with 161 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/date-picker/RangePicker.vue
View File

@ -182,13 +182,14 @@ export default {
}, },
renderFooter (...args) { renderFooter (...args) {
const { prefixCls, ranges, renderExtraFooter } = this const { prefixCls, ranges, $scopedSlots, $slots } = this
const renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter
if (!ranges && !renderExtraFooter) { if (!ranges && !renderExtraFooter) {
return null return null
} }
const customFooter = renderExtraFooter ? ( const customFooter = renderExtraFooter ? (
<div class={`${prefixCls}-footer-extra`} key='extra'> <div class={`${prefixCls}-footer-extra`} key='extra'>
{renderExtraFooter(...args)} {typeof renderExtraFooter === 'function' ? renderExtraFooter(...args) : renderExtraFooter}
</div> </div>
) : null ) : null
const operations = Object.keys(ranges || {}).map((range) => { const operations = Object.keys(ranges || {}).map((range) => {

5
components/date-picker/createPicker.js
View File

@ -51,10 +51,11 @@ export default function createPicker (TheCalendar, props) {
}, },
methods: { methods: {
renderFooter (...args) { renderFooter (...args) {
const { prefixCls, renderExtraFooter } = this const { prefixCls, $scopedSlots, $slots } = this
const renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter
return renderExtraFooter ? ( return renderExtraFooter ? (
<div class={`${prefixCls}-footer-extra`}> <div class={`${prefixCls}-footer-extra`}>
{renderExtraFooter(...args)} {typeof renderExtraFooter === 'function' ? renderExtraFooter(...args) : renderExtraFooter}
</div> </div>
) : null ) : null
}, },

49
components/date-picker/demo/disabled.md
View File

@ -1,34 +1,37 @@
---
order: 4
title:
zh-CN: 禁用
en-US: Disabled
---
## zh-CN
<cn>
#### 禁用
选择框的不可用状态。 选择框的不可用状态。
</cn>
## en-US <us>
#### Disabled
A disabled state of the `DatePicker`. A disabled state of the `DatePicker`.
</us>
````jsx ```html
import { DatePicker } from 'antd'; <template>
import moment from 'moment';
const { MonthPicker, RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
ReactDOM.render(
<div> <div>
<DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled /> <a-date-picker :defaultValue="moment('2015-06-06', dateFormat)" disabled />
<br /> <br />
<MonthPicker defaultValue={moment('2015-06', 'YYYY-MM')} disabled /> <a-month-picker :defaultValue="moment('2015-06', 'YYYY-MM')" disabled />
<br /> <br />
<RangePicker <a-range-picker
defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]} :defaultValue="[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]"
disabled disabled
/> />
</div> </div>
, mountNode); </template>
```` <script>
import moment from 'moment';
export default {
data(){
this.dateFormat = 'YYYY-MM-DD'
return {}
},
methods: {
moment,
}
}
</script>
```

57
components/date-picker/demo/extra-footer.md
View File

@ -1,29 +1,42 @@
---
order: 10
title:
zh-CN: 额外的页脚
en-US: Extra Footer
---
## zh-CN
<cn>
#### 额外的页脚
在浮层中加入额外的页脚，以满足某些定制信息的需求。 在浮层中加入额外的页脚，以满足某些定制信息的需求。
</cn>
## en-US <us>
#### Extra Footer
Render extra footer in panel for customized requirements. Render extra footer in panel for customized requirements.
</us>
````jsx ```html
import { DatePicker } from 'antd'; <template>
const { RangePicker, MonthPicker } = DatePicker;
ReactDOM.render(
<div> <div>
<DatePicker renderExtraFooter={() => 'extra footer'} /> <a-date-picker>
<DatePicker renderExtraFooter={() => 'extra footer'} showTime /> <template slot="renderExtraFooter">
<RangePicker renderExtraFooter={() => 'extra footer'} /> extra footer
<RangePicker renderExtraFooter={() => 'extra footer'} showTime /> </template>
<MonthPicker renderExtraFooter={() => 'extra footer'} placeholder="Select month" /> </a-date-picker>
<a-date-picker showTime >
<template slot="renderExtraFooter">
extra footer
</template>
</a-date-picker>
<a-range-picker >
<template slot="renderExtraFooter">
extra footer
</template>
</a-range-picker>
<a-range-picker showTime >
<template slot="renderExtraFooter">
extra footer
</template>
</a-range-picker>
<a-month-picker placeholder="Select month" >
<template slot="renderExtraFooter">
extra footer
</template>
</a-month-picker>
</div> </div>
, mountNode); </template>
```` ```

55
components/date-picker/demo/format.md
View File

@ -1,35 +1,40 @@
---
order: 1
title:
zh-CN: 日期格式
en-US: Date Format
---
## zh-CN
<cn>
#### 日期格式
使用 `format` 属性，可以自定义日期显示格式。 使用 `format` 属性，可以自定义日期显示格式。
</cn>
## en-US <us>
#### Date Format
We can set the date format by `format`. We can set the date format by `format`.
</us>
````jsx ```html
import { DatePicker } from 'antd'; <template>
import moment from 'moment';
const { MonthPicker, RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';
ReactDOM.render(
<div> <div>
<DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> <a-date-picker :defaultValue="moment('2015/01/01', dateFormat)" :format="dateFormat" />
<br /> <br />
<MonthPicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} /> <a-month-picker :defaultValue="moment('2015/01', monthFormat)" :format="monthFormat" />
<br /> <br />
<RangePicker <a-range-picker
defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]} :defaultValue="[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]"
format={dateFormat} :format="dateFormat"
/> />
</div> </div>
, mountNode); </template>
```` <script>
import moment from 'moment';
export default {
data(){
return {
dateFormat: 'YYYY/MM/DD',
monthFormat: 'YYYY/MM',
}
},
methods: {
moment,
}
}
</script>
```

115
components/date-picker/demo/mode.md
View File

@ -1,82 +1,61 @@
---
order: 11
title:
zh-CN: 受控面板
en-US: Controlled Panels
---
## zh-CN
<cn>
#### 受控面板
通过组合 `mode` 与 `onPanelChange` 控制要展示的面板。 通过组合 `mode` 与 `onPanelChange` 控制要展示的面板。
</cn>
## en-US <us>
#### Controlled Panels
Determing which panel to show with `mode` and `onPanelChange`. Determing which panel to show with `mode` and `onPanelChange`.
</us>
````jsx ```html
import { DatePicker } from 'antd'; <template>
const { RangePicker } = DatePicker; <div>
<a-date-picker
class ControlledDatePicker extends React.Component { :mode="mode1"
state = { mode: 'time' };
handleOpenChange = (open) => {
if (open) {
this.setState({ mode: 'time' });
}
}
handlePanelChange = (value, mode) => {
this.setState({ mode });
}
render() {
return (
<DatePicker
mode={this.state.mode}
showTime showTime
onOpenChange={this.handleOpenChange} @openChange="handleOpenChange1"
onPanelChange={this.handlePanelChange} @panelChange="handlePanelChange1"
/> />
); <br />
} <a-range-picker
} :placeholder="['Start month', 'End month']"
format="YYYY-MM"
class ControlledRangePicker extends React.Component { :value="value"
state = { :mode="mode2"
mode: ['month', 'month'], @panelChange="handlePanelChange2"
/>
</div>
</template>
<script>
export default {
data(){
return {
mode1: 'time',
mode2: ['month', 'month'],
value: [], value: [],
}; }
},
methods: {
handleOpenChange1(open) {
if (open) {
this.mode1 = 'time'
}
},
handlePanelChange = (value, mode) => { handlePanelChange1(value, mode) {
this.setState({ this.mode1 = mode
value, },
mode: [ handlePanelChange2 (value, mode) {
this.value = value
this.mode2 = [
mode[0] === 'date' ? 'month' : mode[0], mode[0] === 'date' ? 'month' : mode[0],
mode[1] === 'date' ? 'month' : mode[1], mode[1] === 'date' ? 'month' : mode[1],
], ]
}); },
}
render() {
const { value, mode } = this.state;
return (
<RangePicker
placeholder={['Start month', 'End month']}
format="YYYY-MM"
value={value}
mode={mode}
onPanelChange={this.handlePanelChange}
/>
);
} }
} }
</script>
```
ReactDOM.render(
<div>
<ControlledDatePicker />
<br />
<ControlledRangePicker />
</div>
, mountNode);
````

14
components/date-picker/interface.js
View File

@ -41,7 +41,7 @@ export const SinglePickerProps = () => ({
export const DatePickerProps = () => ({ export const DatePickerProps = () => ({
...PickerProps(), ...SinglePickerProps(), ...PickerProps(), ...SinglePickerProps(),
showTime: PropTypes.oneOfType([PropTypes.shape(TimePickerProps()).loose, PropTypes.bool]), showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
open: PropTypes.bool, open: PropTypes.bool,
disabledTime: PropTypes.func, disabledTime: PropTypes.func,
// onOpenChange?: (status: bool) => void; // onOpenChange?: (status: bool) => void;
@ -54,9 +54,15 @@ export const MonthPickerProps = () => ({
placeholder: PropTypes.string, placeholder: PropTypes.string,
monthCellContentRender: PropTypes.func, monthCellContentRender: PropTypes.func,
}) })
function isMomentArray (value) {
if (Array.isArray(value)) {
return value.length === 0 || !!value.find((val) => val === undefined || moment.isMoment(val))
}
return false
}
export const RangePickerValue = PropTypes.arrayOf(MomentType) export const RangePickerValue = PropTypes.custom(isMomentArray)
export const RangePickerPresetRange = PropTypes.oneOfType([RangePickerValue, PropTypes.func]) // export const RangePickerPresetRange = PropTypes.oneOfType([RangePickerValue, PropTypes.func])
export const RangePickerProps = () => ({ export const RangePickerProps = () => ({
...PickerProps(), ...PickerProps(),
@ -66,7 +72,7 @@ export const RangePickerProps = () => ({
// onChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void; // onChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
// onCalendarChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void; // onCalendarChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
// onOk?: (selectedTime: moment.Moment) => void; // onOk?: (selectedTime: moment.Moment) => void;
showTime: PropTypes.oneOfType([PropTypes.shape(TimePickerProps()).loose, PropTypes.bool]), showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
ranges: PropTypes.objectOf(String), ranges: PropTypes.objectOf(String),
placeholder: PropTypes.arrayOf(String), placeholder: PropTypes.arrayOf(String),
mode: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(String)]), mode: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(String)]),

6
components/date-picker/wrapPicker.js
View File

@ -131,7 +131,11 @@ export default function wrapPicker (Picker, props, defaultFormat) {
return ( return (
<Picker <Picker
{...pickerProps} {...pickerProps}
/> >
<template slot='renderExtraFooter'>
{this.$slots.renderExtraFooter}
</template>
</Picker>
) )
}, },
}, },