mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 11:39:28 +08:00
Feat week picker (#7404)
* New Component WeekPicker close #212 * Add WeexPicker in API doc * update snapshot * Add test cases * update snapshot
This commit is contained in:
偏右
GitHub
parent
75518241d6
commit
f3911b3707
131
components/date-picker/WeekPicker.tsx
Normal file
131
components/date-picker/WeekPicker.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -62,6 +62,22 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
|
||||
/>
|
||||
</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>
|
||||
`;
|
||||
|
||||
@ -604,6 +620,22 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
|
||||
/>
|
||||
</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>
|
||||
`;
|
||||
|
||||
|
||||
@ -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
24
components/date-picker/__tests__/other.test.js
Normal 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();
|
||||
});
|
||||
});
|
||||
@ -15,7 +15,7 @@ Basic use case. Users can select or input a date in panel.
|
||||
|
||||
````jsx
|
||||
import { DatePicker } from 'antd';
|
||||
const { MonthPicker, RangePicker } = DatePicker;
|
||||
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
|
||||
|
||||
function onChange(date, dateString) {
|
||||
console.log(date, dateString);
|
||||
@ -28,6 +28,8 @@ ReactDOM.render(
|
||||
<MonthPicker onChange={onChange} placeholder="Select month" />
|
||||
<br />
|
||||
<RangePicker onChange={onChange} />
|
||||
<br />
|
||||
<WeekPicker onChange={onChange} placeholder="Select week" />
|
||||
</div>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
@ -16,7 +16,7 @@ The input box comes in three sizes. `default` will be used if `size` is omitted.
|
||||
|
||||
````jsx
|
||||
import { DatePicker, Radio } from 'antd';
|
||||
const { MonthPicker, RangePicker } = DatePicker;
|
||||
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
|
||||
|
||||
class PickerSizesDemo extends React.Component {
|
||||
state = {
|
||||
@ -42,6 +42,8 @@ class PickerSizesDemo extends React.Component {
|
||||
<MonthPicker size={size} />
|
||||
<br />
|
||||
<RangePicker size={size} />
|
||||
<br />
|
||||
<WeekPicker size={size} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -12,13 +12,14 @@ By clicking the input box, you can select a date from a popup calendar.
|
||||
|
||||
## API
|
||||
|
||||
There are three kinds of picker:
|
||||
There are four kinds of picker:
|
||||
|
||||
* DatePicker
|
||||
* MonthPicker
|
||||
* 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
|
||||
import moment from 'moment';
|
||||
@ -32,7 +33,7 @@ moment.locale('zh-cn');
|
||||
|
||||
### 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 |
|
||||
|--------------|----------------|----------|--------------|
|
||||
@ -66,7 +67,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
|
||||
|
||||
### MonthPicker
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|----------------|----------|--------------|
|
||||
| value | to set 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) | - |
|
||||
| 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
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|
||||
@ -5,6 +5,7 @@ import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
|
||||
import createPicker from './createPicker';
|
||||
import wrapPicker from './wrapPicker';
|
||||
import RangePicker from './RangePicker';
|
||||
import WeekPicker from './WeekPicker';
|
||||
import Calendar from './Calendar';
|
||||
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, {
|
||||
RangePicker: wrapPicker(RangePicker),
|
||||
Calendar,
|
||||
MonthPicker,
|
||||
WeekPicker: wrapPicker(WeekPicker, 'YYYY-Wo'),
|
||||
});
|
||||
|
||||
export interface DatePickerDecorator extends React.ClassicComponentClass<DatePickerProps> {
|
||||
RangePicker: React.ClassicComponentClass<RangePickerProps>;
|
||||
MonthPicker: React.ClassicComponentClass<MonthPickerProps>;
|
||||
WeekPicker: React.ClassicComponentClass<WeexPickerProps>;
|
||||
}
|
||||
|
||||
export default DatePicker as DatePickerDecorator;
|
||||
|
||||
@ -13,13 +13,14 @@ subtitle: 日期选择框
|
||||
|
||||
## API
|
||||
|
||||
日期类组件包括以下三种形式。
|
||||
日期类组件包括以下四种形式。
|
||||
|
||||
* DatePicker
|
||||
* MonthPicker
|
||||
* RangePicker
|
||||
* WeekPicker
|
||||
|
||||
**注意：**DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
|
||||
**注意：**DatePicker、MonthPicker、RangePicker、WeekPicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
|
||||
|
||||
```jsx
|
||||
import moment from 'moment';
|
||||
@ -33,7 +34,7 @@ moment.locale('zh-cn');
|
||||
|
||||
### 共同的 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) | - |
|
||||
| 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
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|
||||
21
components/date-picker/style/WeekPicker.less
Normal file
21
components/date-picker/style/WeekPicker.less
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -14,3 +14,4 @@
|
||||
@import "YearPanel";
|
||||
@import "DecadePanel";
|
||||
@import "MonthPicker";
|
||||
@import "WeekPicker";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user