Skip to content

Commit 32a6f31

Browse files
myronliu347myronliu347
committed
feat(Calendar): add yearRange prop
1 parent 514846e commit 32a6f31

File tree

4 files changed

+32
-20
lines changed

4 files changed

+32
-20
lines changed

‎docs/calendar/index.en-us.md

+1
Original file line numberDiff line numberDiff line change
@@ -41,5 +41,6 @@ moment.locale('zh-cn');
4141
| onModeChange | Callback when change mode <br><br>**签名**:<br>Function(mode: string) => void<br>**参数**:<br>_mode_: {string} mode type: date month year | Function | func.noop |
4242
| dateCellRender | Render function for date cell<br><br>**signature**:<br>Function(value: Object) => ReactNode<br>**parameter**:<br>_value_: {Object} date object<br>**return**:<br>{ReactNode} null<br> | Function | (value) => value.date() |
4343
| monthCellRender | Render function for month cell<br><br>**signature**:<br>Function(calendarDate: Object) => ReactNode<br>**parameter**:<br>_calendarDate_: {Object} current date object<br>**return**:<br>{ReactNode} null<br> | Function | - |
44+
| yearRange | Year Range，[START_YEAR, END_YEAR] \(only shape in ‘card’, 'fullscreen') | Array&lt;Number> | - |
4445
| disabledDate | Function to disable dates <br><br>**signature**:<br>Function(calendarDate: Object) => Boolean<br>**parameter**:<br>_calendarDate_: {Object} current date object<br>_view_: {Enum} current view type: 'year', 'month', 'date' <br>**return**:<br>{Boolean} null<br> | Function | - |
4546

‎docs/calendar/index.md

+15-14
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,18 @@ moment.locale('zh-cn');
2929

3030
### Calendar
3131

32-
| 参数 | 说明 | 类型 | 默认值 |
33-
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------- |
34-
| defaultValue | 默认选中的日期（moment 对象） | custom | - |
35-
| shape | 展现形态<br><br>**可选值**:<br>'card', 'fullscreen', 'panel' | Enum | 'fullscreen' |
36-
| value | 选中的日期值 (moment 对象) | custom | - |
37-
| mode | 面板模式<br><br>**可选值**:<br>'date', 'month', 'year' | Enum | - |
38-
| showOtherMonth | 是否展示非本月的日期 | Boolean | true |
39-
| defaultVisibleMonth | 默认展示的月份<br><br>**签名**:<br>Function() => void | Function | - |
40-
| onSelect | 选择日期单元格时的回调<br><br>**签名**:<br>Function(value: Object) => void<br>**参数**:<br>_value_: {Object} 对应的日期值 (moment 对象) | Function | func.noop |
41-
| onModeChange | 面板模式变化时的回调<br><br>**签名**:<br>Function(mode: String) => void<br>**参数**:<br>_mode_: {String} 对应面板模式 date month year | Function | func.noop |
42-
| onVisibleMonthChange | 展现的月份变化时的回调<br><br>**签名**:<br>Function(value: Object, reason: String) => void<br>**参数**:<br>_value_: {Object} 显示的月份 (moment 对象)<br>_reason_: {String} 触发月份改变原因 | Function | func.noop |
43-
| dateCellRender | 自定义日期渲染函数<br><br>**签名**:<br>Function(value: Object) => ReactNode<br>**参数**:<br>_value_: {Object} 日期值（moment对象）<br>**返回值**:<br>{ReactNode} null<br> | Function | value => value.date() |
44-
| monthCellRender | 自定义月份渲染函数<br><br>**签名**:<br>Function(calendarDate: Object) => ReactNode<br>**参数**:<br>_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象<br>**返回值**:<br>{ReactNode} null<br> | Function | - |
45-
| disabledDate | 不可选择的日期<br><br>**签名**:<br>Function(calendarDate: Object, view: String) => Boolean<br>**参数**:<br>_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象<br>_view_: {String} 当前视图类型，year: 年， month: 月, date: 日<br>**返回值**:<br>{Boolean} null<br> | Function | - |
32+
| 参数 | 说明 | 类型 | 默认值 |
33+
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | --------------------- |
34+
| defaultValue | 默认选中的日期（moment 对象） | custom | - |
35+
| shape | 展现形态<br><br>**可选值**:<br>'card', 'fullscreen', 'panel' | Enum | 'fullscreen' |
36+
| value | 选中的日期值 (moment 对象) | custom | - |
37+
| mode | 面板模式<br><br>**可选值**:<br>'date', 'month', 'year' | Enum | - |
38+
| showOtherMonth | 是否展示非本月的日期 | Boolean | true |
39+
| defaultVisibleMonth | 默认展示的月份<br><br>**签名**:<br>Function() => void | Function | - |
40+
| onSelect | 选择日期单元格时的回调<br><br>**签名**:<br>Function(value: Object) => void<br>**参数**:<br>_value_: {Object} 对应的日期值 (moment 对象) | Function | func.noop |
41+
| onModeChange | 面板模式变化时的回调<br><br>**签名**:<br>Function(mode: String) => void<br>**参数**:<br>_mode_: {String} 对应面板模式 date month year | Function | func.noop |
42+
| onVisibleMonthChange | 展现的月份变化时的回调<br><br>**签名**:<br>Function(value: Object, reason: String) => void<br>**参数**:<br>_value_: {Object} 显示的月份 (moment 对象)<br>_reason_: {String} 触发月份改变原因 | Function | func.noop |
43+
| dateCellRender | 自定义日期渲染函数<br><br>**签名**:<br>Function(value: Object) => ReactNode<br>**参数**:<br>_value_: {Object} 日期值（moment对象）<br>**返回值**:<br>{ReactNode} null<br> | Function | value => value.date() |
44+
| monthCellRender | 自定义月份渲染函数<br><br>**签名**:<br>Function(calendarDate: Object) => ReactNode<br>**参数**:<br>_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象<br>**返回值**:<br>{ReactNode} null<br> | Function | - |
45+
| yearRange | 年份范围，[START_YEAR, END_YEAR] \(只在shape 为 ‘card’, 'fullscreen' 下生效) | Array&lt;Number> | - |
46+
| disabledDate | 不可选择的日期<br><br>**签名**:<br>Function(calendarDate: Object, view: String) => Boolean<br>**参数**:<br>_calendarDate_: {Object} 对应 Calendar 返回的自定义日期对象<br>_view_: {String} 当前视图类型，year: 年， month: 月, date: 日<br>**返回值**:<br>{Boolean} null<br> | Function | - |

‎src/calendar/calendar.jsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ class Calendar extends Component {
6363
onSelect: PropTypes.func,
6464
/**
6565
* 面板模式变化时的回调
66-
* @param {Object} mode 对应面板模式 date month year
66+
* @param {String} mode 对应面板模式 date month year
6767
*/
6868
onModeChange: PropTypes.func,
6969
/**
@@ -89,6 +89,10 @@ class Calendar extends Component {
8989
*/
9090
monthCellRender: PropTypes.func,
9191
yearCellRender: PropTypes.func, // 兼容 0.x yearCellRender
92+
/**
93+
* 年份范围，[START_YEAR, END_YEAR] (只在shape 为 ‘card’, 'fullscreen' 下生效)
94+
*/
95+
yearRange: PropTypes.arrayOf(PropTypes.number),
9296
/**
9397
* 不可选择的日期
9498
* @param {Object} calendarDate 对应 Calendar 返回的自定义日期对象
@@ -232,6 +236,7 @@ class Calendar extends Component {
232236
monthCellRender,
233237
yearCellRender,
234238
disabledDate,
239+
yearRange,
235240
...others
236241
} = this.props;
237242
const state = this.state;
@@ -330,7 +335,7 @@ class Calendar extends Component {
330335
{shape === 'panel' ? (
331336
panelHeaders[state.mode]
332337
) : (
333-
<CardHeader {...headerProps} />
338+
<CardHeader {...headerProps} yearRange={yearRange} />
334339
)}
335340
{tables[state.mode]}
336341
</div>

‎src/calendar/head/card-header.jsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Radio from '../../radio';
55

66
class CardHeader extends React.PureComponent {
77
static propTypes = {
8+
yearRange: PropTypes.arrayOf(PropTypes.number),
89
yearRangeOffset: PropTypes.number,
910
locale: PropTypes.object,
1011
};
@@ -18,12 +19,16 @@ class CardHeader extends React.PureComponent {
1819
};
1920

2021
getYearSelect(year) {
21-
const { prefix, yearRangeOffset, locale } = this.props;
22-
const startYear = year - yearRangeOffset;
23-
const endYear = year + yearRangeOffset;
22+
const { prefix, yearRangeOffset, yearRange = [], locale } = this.props;
23+
24+
let [startYear, endYear] = yearRange;
25+
if (!startYear || !endYear) {
26+
startYear = year - yearRangeOffset;
27+
endYear = year + yearRangeOffset;
28+
}
2429

2530
const options = [];
26-
for (let i = startYear; i < endYear; i++) {
31+
for (let i = startYear; i <= endYear; i++) {
2732
options.push(
2833
<Select.Option key={i} value={i}>
2934
{i}

0 commit comments

Comments
 (0)