mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 19:42:54 +08:00
Code Issues Actions 41 Packages Projects Releases Wiki Activity

docs: DatePicker demo refactor (#25913)

Browse Source 
* docs: DatePicker change type demo

* chore: snapshot

* chore

* docs: DatePicker use Space

* chore: snapshot
This commit is contained in:
07akioni 2020-07-30 19:17:34 +08:00 committed by GitHub
parent 3b7d23485a
commit 5a08aab0e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 3009 additions and 2840 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5664
components/date-picker/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

51
components/date-picker/demo/basic.md
View File

@ -14,24 +14,47 @@ title:
Basic use case. Users can select or input a date in panel.
```jsx
import { DatePicker } from 'antd';
import { DatePicker, TimePicker, Select, Space } from 'antd';
function onChange(date, dateString) {
console.log(date, dateString);
const { Option } = Select;
function TypeSelect({ type, onChange }) {
return (
<Select value={type} onChange={onChange}>
<Option value="time">Time</Option>
<Option value="date">Date</Option>
<Option value="week">Week</Option>
<Option value="month">Month</Option>
<Option value="quarter">Quarter</Option>
<Option value="year">Year</Option>
</Select>
);
}
function PickerWithType({ type, onChange }) {
if (type === 'time') return <TimePicker onChange={onChange} />;
if (type === 'date') return <DatePicker onChange={onChange} />;
return <DatePicker picker={type} onChange={onChange} />;
}
function SwitchablePicker() {
const [type, setType] = React.useState('time');
const onChange = value => {
console.log(value);
};
return (
<Space>
<TypeSelect type={type} onChange={setType} />
<PickerWithType type={type} onChange={onChange} />
</Space>
);
}
ReactDOM.render(
<>
<DatePicker onChange={onChange} />
<br />
<DatePicker onChange={onChange} picker="week" />
<br />
<DatePicker onChange={onChange} picker="month" />
<br />
<DatePicker onChange={onChange} picker="quarter" />
<br />
<DatePicker onChange={onChange} picker="year" />
</>,
<Space direction="vertical" size={12}>
<DatePicker />
<SwitchablePicker />
</Space>,
mountNode,
);
```

13
components/date-picker/demo/bordered.md
View File

@ -14,28 +14,21 @@ title:
Bordered-less style component.
```jsx
import { DatePicker } from 'antd';
import { DatePicker, Space } from 'antd';
const { RangePicker } = DatePicker;
ReactDOM.render(
<>
<Space direction="vertical" size={12}>
<DatePicker bordered={false} />
<br />
<DatePicker picker="week" bordered={false} />
<br />
<DatePicker picker="month" bordered={false} />
<br />
<DatePicker picker="year" bordered={false} />
<br />
<RangePicker bordered={false} />
<br />
<RangePicker picker="week" bordered={false} />
<br />
<RangePicker picker="month" bordered={false} />
<br />
<RangePicker picker="year" bordered={false} />
</>,
</Space>,
mountNode,
);
```

6
components/date-picker/demo/date-render.md
View File

@ -14,12 +14,12 @@ title:
We can customize the rendering of date cells in the calendar by providing a `dateRender` function to `DatePicker`.
```jsx
import { DatePicker } from 'antd';
import { DatePicker, Space } from 'antd';
const { RangePicker } = DatePicker;
ReactDOM.render(
<>
<Space direction="vertical" size={12}>
<DatePicker
dateRender={current => {
const style = {};
@ -48,7 +48,7 @@ ReactDOM.render(
);
}}
/>
</>,
</Space>,
mountNode,
);
```

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

@ -15,7 +15,7 @@ Disabled part of dates and time by `disabledDate` and `disabledTime` respectivel
```jsx
import moment from 'moment';
import { DatePicker } from 'antd';
import { DatePicker, Space } from 'antd';
const { RangePicker } = DatePicker;
@ -56,16 +56,14 @@ function disabledRangeTime(_, type) {
}
ReactDOM.render(
<>
<Space direction="vertical" size={12}>
<DatePicker
format="YYYY-MM-DD HH:mm:ss"
disabledDate={disabledDate}
disabledTime={disabledDateTime}
showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
/>
<br />
<DatePicker picker="month" disabledDate={disabledDate} />
<br />
<RangePicker disabledDate={disabledDate} />
<RangePicker
disabledDate={disabledDate}
@ -76,7 +74,7 @@ ReactDOM.render(
}}
format="YYYY-MM-DD HH:mm:ss"
/>
</>,
</Space>,
mountNode,
);
```

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

@ -14,28 +14,25 @@ title:
A disabled state of the `DatePicker`. You can also set as array to disable one of input.
```jsx
import { DatePicker } from 'antd';
import { DatePicker, Space } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
ReactDOM.render(
<>
<Space direction="vertical" size={12}>
<DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
<br />
<DatePicker picker="month" defaultValue={moment('2015-06', 'YYYY-MM')} disabled />
<br />
<RangePicker
defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]}
disabled
/>
<br />
<RangePicker
defaultValue={[moment('2019-09-03', dateFormat), moment('2019-11-22', dateFormat)]}
disabled={[false, true]}
/>
</>,
</Space>,
mountNode,
);
```

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

@ -14,22 +14,18 @@ title:
Render extra footer in panel for customized requirements.
```jsx
import { DatePicker } from 'antd';
import { DatePicker, Space } from 'antd';
const { RangePicker } = DatePicker;
ReactDOM.render(
<>
<Space direction="vertical" size={12}>
<DatePicker renderExtraFooter={() => 'extra footer'} />
<br />
<DatePicker renderExtraFooter={() => 'extra footer'} showTime />
<br />
<RangePicker renderExtraFooter={() => 'extra footer'} />
<br />
<RangePicker renderExtraFooter={() => 'extra footer'} showTime />
<br />
<DatePicker renderExtraFooter={() => 'extra footer'} picker="month" />
</>,
</Space>,
mountNode,
);
```

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

@ -14,7 +14,7 @@ title:
We can set the date format by `format`.
```jsx
import { DatePicker } from 'antd';
import { DatePicker, Space } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
@ -25,18 +25,15 @@ const monthFormat = 'YYYY/MM';
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
ReactDOM.render(
<>
<Space direction="vertical" size={12}>
<DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
<br />
<DatePicker defaultValue={moment('01/01/2015', dateFormatList[0])} format={dateFormatList} />
<br />
<DatePicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} picker="month" />
<br />
<RangePicker
defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
format={dateFormat}
/>
</>,
</Space>,
mountNode,
);
```

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

@ -15,7 +15,7 @@ debug: true
Determing which panel to show with `mode` and `onPanelChange`.
```jsx
import { DatePicker } from 'antd';
import { DatePicker, Space } from 'antd';
const { RangePicker } = DatePicker;
@ -77,11 +77,10 @@ class ControlledRangePicker extends React.Component {
}
ReactDOM.render(
<>
<Space direction="vertical" size={12}>
<ControlledDatePicker />
<br />
<ControlledRangePicker />
</>,
</Space>,
mountNode,
);
```

7
components/date-picker/demo/presetted-ranges.md
View File

@ -14,7 +14,7 @@ title:
We can set preset ranges to RangePicker to improve user experience.
```jsx
import { DatePicker } from 'antd';
import { DatePicker, Space } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
@ -25,7 +25,7 @@ function onChange(dates, dateStrings) {
}
ReactDOM.render(
<>
<Space direction="vertical" size={12}>
<RangePicker
ranges={{
Today: [moment(), moment()],
@ -33,7 +33,6 @@ ReactDOM.render(
}}
onChange={onChange}
/>
<br />
<RangePicker
ranges={{
Today: [moment(), moment()],
@ -43,7 +42,7 @@ ReactDOM.render(
format="YYYY/MM/DD HH:mm:ss"
onChange={onChange}
/>
</>,
</Space>,
mountNode,
);
```

10
components/date-picker/demo/range-picker.md
View File

@ -14,22 +14,18 @@ title:
Set range picker type by `picker` prop.
```jsx
import { DatePicker } from 'antd';
import { DatePicker, Space } from 'antd';
const { RangePicker } = DatePicker;
ReactDOM.render(
<>
<Space direction="vertical" size={12}>
<RangePicker />
<br />
<RangePicker showTime />
<br />
<RangePicker picker="week" />
<br />
<RangePicker picker="month" />
<br />
<RangePicker picker="year" />
</>,
</Space>,
mountNode,
);
```

11
components/date-picker/demo/size.md
View File

@ -14,7 +14,7 @@ title:
The input box comes in three sizes. `default` will be used if `size` is omitted.
```jsx
import { DatePicker, Radio } from 'antd';
import { DatePicker, Radio, Space } from 'antd';
const { RangePicker } = DatePicker;
@ -30,22 +30,17 @@ class PickerSizesDemo extends React.Component {
render() {
const { size } = this.state;
return (
<>
<Space direction="vertical" size={12}>
<Radio.Group value={size} onChange={this.handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br />
<br />
<DatePicker size={size} />
<br />
<DatePicker size={size} picker="month" />
<br />
<RangePicker size={size} />
<br />
<DatePicker size={size} picker="week" />
</>
</Space>
);
}
}

6
components/date-picker/demo/start-end.md
View File

@ -21,7 +21,7 @@ When `RangePicker` does not satisfied your requirements, try to implement simila
> - Improve user experience with `open` and `onOpenChange`.
```jsx
import { DatePicker } from 'antd';
import { DatePicker, Space } from 'antd';
class DateRange extends React.Component {
state = {
@ -73,7 +73,7 @@ class DateRange extends React.Component {
render() {
const { startValue, endValue, endOpen } = this.state;
return (
<>
<Space>
<DatePicker
disabledDate={this.disabledStartDate}
showTime
@ -93,7 +93,7 @@ class DateRange extends React.Component {
open={endOpen}
onOpenChange={this.handleEndOpenChange}
/>
</>
</Space>
);
}
}

13
components/date-picker/demo/suffix.md
View File

@ -15,7 +15,7 @@ title:
Basic use case. Users can select or input a date in panel.
```jsx
import { DatePicker } from 'antd';
import { DatePicker, Space } from 'antd';
import { SmileOutlined } from '@ant-design/icons';
const smileIcon = <SmileOutlined />;
@ -26,23 +26,16 @@ function onChange(date, dateString) {
}
ReactDOM.render(
<>
<Space direction="vertical" size={12}>
<DatePicker suffixIcon={smileIcon} onChange={onChange} />
<br />
<DatePicker suffixIcon={smileIcon} onChange={onChange} picker="month" />
<br />
<RangePicker suffixIcon={smileIcon} onChange={onChange} />
<br />
<DatePicker suffixIcon={smileIcon} onChange={onChange} picker="week" />
<br />
<DatePicker suffixIcon="ab" onChange={onChange} />
<br />
<DatePicker suffixIcon="ab" onChange={onChange} picker="month" />
<br />
<RangePicker suffixIcon="ab" onChange={onChange} />
<br />
<DatePicker suffixIcon="ab" onChange={onChange} picker="week" />
</>,
</Space>,
mountNode,
);
```

7
components/date-picker/demo/time.md
View File

@ -14,7 +14,7 @@ title:
This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`.
```jsx
import { DatePicker } from 'antd';
import { DatePicker, Space } from 'antd';
const { RangePicker } = DatePicker;
@ -28,16 +28,15 @@ function onOk(value) {
}
ReactDOM.render(
<>
<Space direction="vertical" size={12}>
<DatePicker showTime onChange={onChange} onOk={onOk} />
<br />
<RangePicker
showTime={{ format: 'HH:mm' }}
format="YYYY-MM-DD HH:mm"
onChange={onChange}
onOk={onOk}
/>
</>,
</Space>,
mountNode,
);
```

9
components/date-picker/index.en-US.md
View File

@ -167,15 +167,6 @@ Added in `4.1.0`.
| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[moment, moment], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
<style>
.code-box-demo .ant-picker {
margin: 0 8px 12px 0;
}
.ant-row-rtl .code-box-demo .ant-picker {
margin: 0 0 12px 8px;
}
</style>
## FAQ
### When set mode to DatePicker/RangePicker, cannot select year or month anymore?

9
components/date-picker/index.zh-CN.md
View File

@ -168,15 +168,6 @@ import locale from 'antd/es/locale/zh_CN';
| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[moment, moment\], dateStrings: \[string, string\], info: { range:`start`\|`end` }) | - | |
| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | - | |
<style>
.code-box-demo .ant-picker {
margin: 0 8px 12px 0;
}
.ant-row-rtl .code-box-demo .ant-picker {
margin: 0 0 12px 8px;
}
</style>
## FAQ
### 当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？