mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

Feat week picker (#7404)

Browse Source 
* New Component WeekPicker

close #212

* Add WeexPicker in API doc

* update snapshot

* Add test cases

* update snapshot
This commit is contained in:
偏右 2017-08-31 20:44:22 +08:00 committed by GitHub
parent 75518241d6
commit f3911b3707
11 changed files with 1216 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
components/date-picker/WeekPicker.tsx Normal file
View File

@ -0,0 +1,131 @@
import React, { Component } from 'react';
import moment from 'moment';
import Calendar from 'rc-calendar';
import RcDatePicker from 'rc-calendar/lib/Picker';
import classNames from 'classnames';
import Icon from '../icon';
import { getLocaleCode } from '../_util/getLocale';
function formatValue(value: moment.Moment | undefined, format: string): string {
return (value && value.format(format)) || '';
}
export default class WeekPicker extends Component<any, any> {
static defaultProps = {
format: 'YYYY-Wo',
allowClear: true,
};
constructor(props) {
super(props);
const value = props.value || props.defaultValue;
if (value && !moment.isMoment(value)) {
throw new Error(
'The value/defaultValue of DatePicker or MonthPicker must be ' +
'a moment object after `antd@2.0`, see: https://u.ant.design/date-picker-value',
);
}
this.state = {
value,
};
}
componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
this.setState({ value: nextProps.value });
}
}
weekDateRender = (current) => {
const selectedValue = this.state.value;
const { prefixCls } = this.props;
if (selectedValue &&
current.year() === selectedValue.year() &&
current.week() === selectedValue.week()) {
return (
<div className={`${prefixCls}-selected-day`}>
<div className={`${prefixCls}-date`}>
{current.date()}
</div>
</div>
);
}
return (
<div className={`${prefixCls}-calendar-date`}>
{current.date()}
</div>
);
}
handleChange = (value) => {
if (!('value' in this.props)) {
this.setState({ value });
}
this.props.onChange(value, formatValue(value, this.props.format));
}
clearSelection = (e) => {
e.preventDefault();
e.stopPropagation();
this.handleChange(null);
}
render() {
const {
prefixCls, className, disabled, pickerClass, popupStyle,
pickerInputClass, format, allowClear, locale, disabledDate,
} = this.props;
const pickerValue = this.state.value;
const localeCode = getLocaleCode(this.context);
if (pickerValue && localeCode) {
pickerValue.locale(localeCode);
}
const placeholder = ('placeholder' in this.props)
? this.props.placeholder : locale.lang.placeholder;
const calendar = (
<Calendar
showWeekNumber
dateRender={this.weekDateRender}
prefixCls={prefixCls}
format={format}
locale={locale.lang}
showDateInput={false}
showToday={false}
disabledDate={disabledDate}
/>
);
const clearIcon = (!disabled && allowClear && this.state.value) ? (
<Icon
type="cross-circle"
className={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
/>
) : null;
const input = ({ value }) => {
return (
<span>
<input
disabled={disabled}
readOnly
value={(value && value.format(format)) || ''}
placeholder={placeholder}
className={pickerInputClass}
/>
{clearIcon}
<span className={`${prefixCls}-picker-icon`} />
</span>
);
};
return (
<span className={classNames(className, pickerClass)}>
<RcDatePicker
{...this.props}
calendar={calendar}
prefixCls={`${prefixCls}-picker-container`}
value={pickerValue}
onChange={this.handleChange}
style={popupStyle}
>
{input}
</RcDatePicker>
</span>
);
}
}

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

@ -62,6 +62,22 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
/> />
</span> </span>
</span> </span>
<br />
<span
class="ant-calendar-picker"
>
<span>
<input
class="ant-calendar-picker-input ant-input"
placeholder="Select week"
readonly=""
value=""
/>
<span
class="ant-calendar-picker-icon"
/>
</span>
</span>
</div> </div>
`; `;
@ -604,6 +620,22 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
/> />
</span> </span>
</span> </span>
<br />
<span
class="ant-calendar-picker"
>
<span>
<input
class="ant-calendar-picker-input ant-input"
placeholder="请选择日期"
readonly=""
value=""
/>
<span
class="ant-calendar-picker-icon"
/>
</span>
</span>
</div> </div>
`; `;

966
components/date-picker/__tests__/__snapshots__/other.test.js.snap Normal file
View File

@ -0,0 +1,966 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
<div>
<div
class="ant-calendar-picker-container ant-calendar-picker-container-placement-bottomLeft "
>
<div
class="ant-calendar ant-calendar-month ant-calendar-month-calendar"
tabindex="0"
>
<div
class="ant-calendar-header"
>
<div
style="position:relative;"
>
<a
class="ant-calendar-prev-year-btn"
role="button"
title="上一年 (Control键加左方向键)"
/>
<a
class="ant-calendar-prev-month-btn"
role="button"
title="上个月 (翻页上键)"
/>
<span
class="ant-calendar-ym-select"
>
<a
class="ant-calendar-year-select"
role="button"
title="选择年份"
>
2000年
</a>
<a
class="ant-calendar-month-select"
role="button"
title="选择月份"
>
1月
</a>
</span>
<a
class="ant-calendar-next-month-btn"
title="下个月 (翻页下键)"
/>
<a
class="ant-calendar-next-year-btn"
title="下一年 (Control键加右方向键)"
/>
</div>
<div
class="ant-calendar-month-panel"
>
<div>
<div
class="ant-calendar-month-panel-header"
>
<a
class="ant-calendar-month-panel-prev-year-btn"
role="button"
title="上一年 (Control键加左方向键)"
/>
<a
class="ant-calendar-month-panel-year-select"
role="button"
title="选择年份"
>
<span
class="ant-calendar-month-panel-year-select-content"
>
2000
</span>
<span
class="ant-calendar-month-panel-year-select-arrow"
>
x
</span>
</a>
<a
class="ant-calendar-month-panel-next-year-btn"
role="button"
title="下一年 (Control键加右方向键)"
/>
</div>
<div
class="ant-calendar-month-panel-body"
>
<table
cellspacing="0"
class="ant-calendar-month-panel-table"
role="grid"
>
<tbody
class="ant-calendar-month-panel-tbody"
>
<tr
role="row"
>
<td
class="ant-calendar-month-panel-cell ant-calendar-month-panel-selected-cell"
role="gridcell"
title="一月"
>
<a
class="ant-calendar-month-panel-month"
>
一月
</a>
</td>
<td
class="ant-calendar-month-panel-cell"
role="gridcell"
title="二月"
>
<a
class="ant-calendar-month-panel-month"
>
二月
</a>
</td>
<td
class="ant-calendar-month-panel-cell"
role="gridcell"
title="三月"
>
<a
class="ant-calendar-month-panel-month"
>
三月
</a>
</td>
</tr>
<tr
role="row"
>
<td
class="ant-calendar-month-panel-cell"
role="gridcell"
title="四月"
>
<a
class="ant-calendar-month-panel-month"
>
四月
</a>
</td>
<td
class="ant-calendar-month-panel-cell"
role="gridcell"
title="五月"
>
<a
class="ant-calendar-month-panel-month"
>
五月
</a>
</td>
<td
class="ant-calendar-month-panel-cell"
role="gridcell"
title="六月"
>
<a
class="ant-calendar-month-panel-month"
>
六月
</a>
</td>
</tr>
<tr
role="row"
>
<td
class="ant-calendar-month-panel-cell"
role="gridcell"
title="七月"
>
<a
class="ant-calendar-month-panel-month"
>
七月
</a>
</td>
<td
class="ant-calendar-month-panel-cell"
role="gridcell"
title="八月"
>
<a
class="ant-calendar-month-panel-month"
>
八月
</a>
</td>
<td
class="ant-calendar-month-panel-cell"
role="gridcell"
title="九月"
>
<a
class="ant-calendar-month-panel-month"
>
九月
</a>
</td>
</tr>
<tr
role="row"
>
<td
class="ant-calendar-month-panel-cell"
role="gridcell"
title="十月"
>
<a
class="ant-calendar-month-panel-month"
>
十月
</a>
</td>
<td
class="ant-calendar-month-panel-cell"
role="gridcell"
title="十一月"
>
<a
class="ant-calendar-month-panel-month"
>
十一月
</a>
</td>
<td
class="ant-calendar-month-panel-cell"
role="gridcell"
title="十二月"
>
<a
class="ant-calendar-month-panel-month"
>
十二月
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
<div>
<div
class="ant-calendar-picker-container ant-calendar-picker-container-placement-bottomLeft "
>
<div
class="ant-calendar ant-calendar-week-number"
tabindex="0"
>
<div
class="ant-calendar-panel"
>
<div
class="ant-calendar-date-panel"
>
<div
class="ant-calendar-header"
>
<div
style="position:relative;"
>
<a
class="ant-calendar-prev-year-btn"
role="button"
title="上一年 (Control键加左方向键)"
/>
<a
class="ant-calendar-prev-month-btn"
role="button"
title="上个月 (翻页上键)"
/>
<span
class="ant-calendar-ym-select"
>
<a
class="ant-calendar-year-select"
role="button"
title="选择年份"
>
2000年
</a>
<a
class="ant-calendar-month-select"
role="button"
title="选择月份"
>
1月
</a>
</span>
<a
class="ant-calendar-next-month-btn"
title="下个月 (翻页下键)"
/>
<a
class="ant-calendar-next-year-btn"
title="下一年 (Control键加右方向键)"
/>
</div>
</div>
<div
class="ant-calendar-body"
>
<table
cellspacing="0"
class="ant-calendar-table"
role="grid"
>
<thead>
<tr
role="row"
>
<th
class="ant-calendar-column-header ant-calendar-week-number-header"
role="columnheader"
>
<span
class="ant-calendar-column-header-inner"
>
x
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="周一"
>
<span
class="ant-calendar-column-header-inner"
>
一
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="周二"
>
<span
class="ant-calendar-column-header-inner"
>
二
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="周三"
>
<span
class="ant-calendar-column-header-inner"
>
三
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="周四"
>
<span
class="ant-calendar-column-header-inner"
>
四
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="周五"
>
<span
class="ant-calendar-column-header-inner"
>
五
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="周六"
>
<span
class="ant-calendar-column-header-inner"
>
六
</span>
</th>
<th
class="ant-calendar-column-header"
role="columnheader"
title="周日"
>
<span
class="ant-calendar-column-header-inner"
>
日
</span>
</th>
</tr>
</thead>
<tbody
class="ant-calendar-tbody"
>
<tr
class="ant-calendar-active-week"
role="row"
>
<td
class="ant-calendar-week-number-cell"
role="gridcell"
>
52
</td>
<td
class="ant-calendar-cell ant-calendar-last-month-cell"
role="gridcell"
title="1999年12月27日"
>
<div
class="ant-calendar-calendar-date"
>
27
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-last-month-cell"
role="gridcell"
title="1999年12月28日"
>
<div
class="ant-calendar-calendar-date"
>
28
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-last-month-cell"
role="gridcell"
title="1999年12月29日"
>
<div
class="ant-calendar-calendar-date"
>
29
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-last-month-cell"
role="gridcell"
title="1999年12月30日"
>
<div
class="ant-calendar-calendar-date"
>
30
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-last-month-cell"
role="gridcell"
title="1999年12月31日"
>
<div
class="ant-calendar-calendar-date"
>
31
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-selected-date ant-calendar-selected-day"
role="gridcell"
title="2000年1月1日"
>
<div
class="ant-calendar-selected-day"
>
<div
class="ant-calendar-date"
>
1
</div>
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月2日"
>
<div
class="ant-calendar-selected-day"
>
<div
class="ant-calendar-date"
>
2
</div>
</div>
</td>
</tr>
<tr
class=""
role="row"
>
<td
class="ant-calendar-week-number-cell"
role="gridcell"
>
1
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月3日"
>
<div
class="ant-calendar-calendar-date"
>
3
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月4日"
>
<div
class="ant-calendar-calendar-date"
>
4
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月5日"
>
<div
class="ant-calendar-calendar-date"
>
5
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月6日"
>
<div
class="ant-calendar-calendar-date"
>
6
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月7日"
>
<div
class="ant-calendar-calendar-date"
>
7
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月8日"
>
<div
class="ant-calendar-calendar-date"
>
8
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月9日"
>
<div
class="ant-calendar-calendar-date"
>
9
</div>
</td>
</tr>
<tr
class=""
role="row"
>
<td
class="ant-calendar-week-number-cell"
role="gridcell"
>
2
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月10日"
>
<div
class="ant-calendar-calendar-date"
>
10
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月11日"
>
<div
class="ant-calendar-calendar-date"
>
11
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月12日"
>
<div
class="ant-calendar-calendar-date"
>
12
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月13日"
>
<div
class="ant-calendar-calendar-date"
>
13
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月14日"
>
<div
class="ant-calendar-calendar-date"
>
14
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月15日"
>
<div
class="ant-calendar-calendar-date"
>
15
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月16日"
>
<div
class="ant-calendar-calendar-date"
>
16
</div>
</td>
</tr>
<tr
class=""
role="row"
>
<td
class="ant-calendar-week-number-cell"
role="gridcell"
>
3
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月17日"
>
<div
class="ant-calendar-calendar-date"
>
17
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月18日"
>
<div
class="ant-calendar-calendar-date"
>
18
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月19日"
>
<div
class="ant-calendar-calendar-date"
>
19
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月20日"
>
<div
class="ant-calendar-calendar-date"
>
20
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月21日"
>
<div
class="ant-calendar-calendar-date"
>
21
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月22日"
>
<div
class="ant-calendar-calendar-date"
>
22
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月23日"
>
<div
class="ant-calendar-calendar-date"
>
23
</div>
</td>
</tr>
<tr
class=""
role="row"
>
<td
class="ant-calendar-week-number-cell"
role="gridcell"
>
4
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月24日"
>
<div
class="ant-calendar-calendar-date"
>
24
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月25日"
>
<div
class="ant-calendar-calendar-date"
>
25
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月26日"
>
<div
class="ant-calendar-calendar-date"
>
26
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月27日"
>
<div
class="ant-calendar-calendar-date"
>
27
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月28日"
>
<div
class="ant-calendar-calendar-date"
>
28
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月29日"
>
<div
class="ant-calendar-calendar-date"
>
29
</div>
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月30日"
>
<div
class="ant-calendar-calendar-date"
>
30
</div>
</td>
</tr>
<tr
class=""
role="row"
>
<td
class="ant-calendar-week-number-cell"
role="gridcell"
>
5
</td>
<td
class="ant-calendar-cell"
role="gridcell"
title="2000年1月31日"
>
<div
class="ant-calendar-calendar-date"
>
31
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-next-month-btn-day"
role="gridcell"
title="2000年2月1日"
>
<div
class="ant-calendar-calendar-date"
>
1
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-next-month-btn-day"
role="gridcell"
title="2000年2月2日"
>
<div
class="ant-calendar-calendar-date"
>
2
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-next-month-btn-day"
role="gridcell"
title="2000年2月3日"
>
<div
class="ant-calendar-calendar-date"
>
3
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-next-month-btn-day"
role="gridcell"
title="2000年2月4日"
>
<div
class="ant-calendar-calendar-date"
>
4
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-next-month-btn-day"
role="gridcell"
title="2000年2月5日"
>
<div
class="ant-calendar-calendar-date"
>
5
</div>
</td>
<td
class="ant-calendar-cell ant-calendar-next-month-btn-day"
role="gridcell"
title="2000年2月6日"
>
<div
class="ant-calendar-calendar-date"
>
6
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
`;

24
components/date-picker/__tests__/other.test.js Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import { mount, render } from 'enzyme';
import moment from 'moment';
import { MonthPicker, WeekPicker } from '../';
describe('MonthPicker and WeekPicker', () => {
it('render MonthPicker', () => {
const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
const wrapper = mount(
<MonthPicker open />
);
wrapper.setProps({ value: birthday });
expect(render(wrapper.find('Trigger').node.getComponent())).toMatchSnapshot();
});
it('render WeekPicker', () => {
const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
const wrapper = mount(
<WeekPicker open />
);
wrapper.setProps({ value: birthday });
expect(render(wrapper.find('Trigger').node.getComponent())).toMatchSnapshot();
});
});

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

@ -15,7 +15,7 @@ Basic use case. Users can select or input a date in panel.
````jsx ````jsx
import { DatePicker } from 'antd'; import { DatePicker } from 'antd';
const { MonthPicker, RangePicker } = DatePicker; const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
function onChange(date, dateString) { function onChange(date, dateString) {
console.log(date, dateString); console.log(date, dateString);
@ -28,6 +28,8 @@ ReactDOM.render(
<MonthPicker onChange={onChange} placeholder="Select month" /> <MonthPicker onChange={onChange} placeholder="Select month" />
<br /> <br />
<RangePicker onChange={onChange} /> <RangePicker onChange={onChange} />
<br />
<WeekPicker onChange={onChange} placeholder="Select week" />
</div> </div>
, mountNode); , mountNode);
```` ````

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

@ -16,7 +16,7 @@ The input box comes in three sizes. `default` will be used if `size` is omitted.
````jsx ````jsx
import { DatePicker, Radio } from 'antd'; import { DatePicker, Radio } from 'antd';
const { MonthPicker, RangePicker } = DatePicker; const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
class PickerSizesDemo extends React.Component { class PickerSizesDemo extends React.Component {
state = { state = {
@ -42,6 +42,8 @@ class PickerSizesDemo extends React.Component {
<MonthPicker size={size} /> <MonthPicker size={size} />
<br /> <br />
<RangePicker size={size} /> <RangePicker size={size} />
<br />
<WeekPicker size={size} />
</div> </div>
); );
} }

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

@ -12,13 +12,14 @@ By clicking the input box, you can select a date from a popup calendar.
## API ## API
There are three kinds of picker: There are four kinds of picker:
* DatePicker * DatePicker
* MonthPicker * MonthPicker
* RangePicker * RangePicker
* WeekPicker
**Note:** Part of locale of DatePicker, MonthPicker, RangePicker is read from value. So, please set the locale of moment correctly. **Note:** Part of locale of DatePicker, MonthPicker, RangePicker, WeekPicker is read from value. So, please set the locale of moment correctly.
```jsx ```jsx
import moment from 'moment'; import moment from 'moment';
@ -32,7 +33,7 @@ moment.locale('zh-cn');
### Common API ### Common API
The following APIs are shared by DatePicker, MonthPicker, RangePicker. The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicker.
| Property | Description | Type | Default | | Property | Description | Type | Default |
|--------------|----------------|----------|--------------| |--------------|----------------|----------|--------------|
@ -66,7 +67,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
### MonthPicker ### MonthPicker
| Property | Description | Type | Default | | Property | Description | Type | Default |
|--------------|----------------|----------|--------------| |--------------|----------------|----------|--------------|
| value | to set date | [moment](http://momentjs.com/) | - | | value | to set date | [moment](http://momentjs.com/) | - |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - | | defaultValue | to set default date | [moment](http://momentjs.com/) | - |
@ -74,6 +75,15 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |
| monthCellContentRender | Custom month cell content render method | function(date, locale): ReactNode | - | | monthCellContentRender | Custom month cell content render method | function(date, locale): ReactNode | - |
### WeekPicker
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | [moment](http://momentjs.com/) | - |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-Wo" |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |
### RangePicker ### RangePicker
| Property | Description | Type | Default | | Property | Description | Type | Default |

8
components/date-picker/index.tsx
View File

@ -5,6 +5,7 @@ import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
import createPicker from './createPicker'; import createPicker from './createPicker';
import wrapPicker from './wrapPicker'; import wrapPicker from './wrapPicker';
import RangePicker from './RangePicker'; import RangePicker from './RangePicker';
import WeekPicker from './WeekPicker';
import Calendar from './Calendar'; import Calendar from './Calendar';
import { TimePickerProps } from '../time-picker'; import { TimePickerProps } from '../time-picker';
@ -75,15 +76,22 @@ export interface RangePickerProps extends PickerProps {
}; };
} }
export interface WeexPickerProps extends PickerProps, SinglePickerProps {
className?: string;
placeholder?: string;
}
Object.assign(DatePicker, { Object.assign(DatePicker, {
RangePicker: wrapPicker(RangePicker), RangePicker: wrapPicker(RangePicker),
Calendar, Calendar,
MonthPicker, MonthPicker,
WeekPicker: wrapPicker(WeekPicker, 'YYYY-Wo'),
}); });
export interface DatePickerDecorator extends React.ClassicComponentClass<DatePickerProps> { export interface DatePickerDecorator extends React.ClassicComponentClass<DatePickerProps> {
RangePicker: React.ClassicComponentClass<RangePickerProps>; RangePicker: React.ClassicComponentClass<RangePickerProps>;
MonthPicker: React.ClassicComponentClass<MonthPickerProps>; MonthPicker: React.ClassicComponentClass<MonthPickerProps>;
WeekPicker: React.ClassicComponentClass<WeexPickerProps>;
} }
export default DatePicker as DatePickerDecorator; export default DatePicker as DatePickerDecorator;

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

@ -13,13 +13,14 @@ subtitle: 日期选择框
## API ## API
日期类组件包括以下三种形式。 日期类组件包括以下四种形式。
* DatePicker * DatePicker
* MonthPicker * MonthPicker
* RangePicker * RangePicker
* WeekPicker
**注意：**DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。 **注意：**DatePicker、MonthPicker、RangePicker、WeekPicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
```jsx ```jsx
import moment from 'moment'; import moment from 'moment';
@ -33,7 +34,7 @@ moment.locale('zh-cn');
### 共同的 API ### 共同的 API
以下 API 为 DatePicker、MonthPicker、RangePicker 共享的 API。 以下 API 为 DatePicker、MonthPicker、RangePicker, WeekPicker 共享的 API。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------| |--------------|----------------|----------|--------------|
@ -75,6 +76,15 @@ moment.locale('zh-cn');
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | | onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |
| monthCellContentRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - | | monthCellContentRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - |
### WeekPicker
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| value | 日期 | [moment](http://momentjs.com/) | - |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-Wo" |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |
### RangePicker ### RangePicker
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |

21
components/date-picker/style/WeekPicker.less Normal file
View File

@ -0,0 +1,21 @@
.@{calendar-prefix-cls}-week-number {
&-cell {
opacity: 0.5;
}
tr {
transition: all .3s;
cursor: pointer;
&:hover {
background: @primary-1;
}
&.@{calendar-prefix-cls}-active-week {
background: @primary-2;
font-weight: 500;
}
.@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date,
.@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date {
background: transparent;
color: @text-color;
}
}
}

1
components/date-picker/style/index.less
View File

@ -14,3 +14,4 @@
@import "YearPanel"; @import "YearPanel";
@import "DecadePanel"; @import "DecadePanel";
@import "MonthPicker"; @import "MonthPicker";
@import "WeekPicker";