Skip to content

Commit

Permalink
feat(Calendar,DatePicker,DateRangePicker): add support for weekStart (
Browse files Browse the repository at this point in the history 
#3814)

* feat(Calendar,DatePicker,DateRangePicker): add support for `weekStart`

* test: add tests for weekStart
  • Loading branch information
@simonguo
simonguo committed May 24, 2024
1 parent 8183e92 commit 9edbbcd
Show file tree
Hide file tree
Showing 36 changed files with 1,095 additions and 493 deletions.
36 changes: 24 additions & 12 deletions docs/pages/components/calendar/en-US/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,33 @@ Use `cellClassName` function to specify the custom class name added to each cell

<!--{include:`compact.md`}-->

### Custom week

<!--{include:`week-start.md`}-->

- Use `weekStart` to specify the first day of the week. If `isoWeek` is set, this property is ignored.
- Use `isoWeek` to enable the [ISO 8601 standard][ISO-8601], where each calendar week begins on Monday and Sunday on the seventh day.
- Use `showWeekNumbers` to display week numbers.

## Props

### `<Calendar>`

<!-- prettier-sort-markdown-table -->

| Property | Type`(Default)` | Description |
| ------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| bordered | boolean | Show border |
| cellClassName | (date: Date) => string \| undefined | Custom cell classes base on it's date |
| compact | boolean | Display a compact calendar |
| defaultValue | Date | Default value |
| isoWeek | boolean | [ISO 8601 standard](https://en.wikipedia.org/wiki/ISO_week_date), each calendar week begins on Monday and Sunday on the seventh day |
| locale | [CalendarLocaleType](/guide/i18n/#calendar) | Locale text |
| onChange | (date:Date) => void | Callback fired before the value changed |
| onSelect | (date:Date) => void | Callback fired before the date selected |
| renderCell | (date: Date) => ReactNode | Custom render calendar cells |
| value | Date | Controlled value |
| Property | Type`(Default)` | Description |
| ------------- | ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --- |
| bordered | boolean | Show border |
| cellClassName | (date: Date) => string \| undefined | Custom cell classes base on it's date |
| compact | boolean | Display a compact calendar |
| defaultValue | Date | Default value |
| isoWeek | boolean | [ISO 8601 standard][iso-8601], each calendar week begins on Monday and Sunday on the seventh day |
| locale | [CalendarLocaleType](/guide/i18n/#calendar) | Locale configuration | |
| onChange | (date: Date) => void | Callback fired before the value changed |
| onSelect | (date: Date) => void | Callback fired before the date selected |
| renderCell | (date: Date) => ReactNode | Custom render calendar cells |
| value | Date | Controlled value |
| weekStart | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 `(0)` | The index of the first day of the week (0 - Sunday). If `isoWeek` is `true`, the value of `weekStart` is ignored <br/>![][5.62.0] |

[ISO-8601]: https://en.wikipedia.org/wiki/ISO_week_date
[5.62.0]: https://img.shields.io/badge/min-v5.62.0-blue
68 changes: 68 additions & 0 deletions docs/pages/components/calendar/fragments/week-start.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!--start-code-->

```js
import { Calendar, RadioGroup, Radio, Form, Toggle } from 'rsuite';

const App = () => {
const [weekStart, setWeekStart] = React.useState(0);
const [isoWeek, setIsoWeek] = React.useState(false);
const [showWeekNumbers, setShowWeekNumbers] = React.useState(true);
return (
<div style={{ display: 'flex' }}>
<div style={{ width: 280, padding: '0 10px' }}>
<Calendar
bordered
compact
weekStart={weekStart}
showWeekNumbers={showWeekNumbers}
isoWeek={isoWeek}
/>
</div>
<div style={{ borderLeft: '1px solid var(--rs-border-primary)', padding: '0 20px' }}>
<Form>
<Form.Group>
<RadioGroup
value={weekStart}
onChange={value => {
setWeekStart(value);
setIsoWeek(false);
}}
inline
appearance="picker"
>
<RadioLabel>Week start</RadioLabel>
<Radio value={0}>Sun</Radio>
<Radio value={1}>Mon</Radio>
<Radio value={2}>Tue</Radio>
<Radio value={3}>Wed</Radio>
<Radio value={4}>Thu</Radio>
<Radio value={5}>Fri</Radio>
<Radio value={6}>Sat</Radio>
</RadioGroup>
</Form.Group>

<Form.Group>
<Form.ControlLabel>
<Toggle checked={isoWeek} onChange={setIsoWeek} />
ISO week
</Form.ControlLabel>
</Form.Group>

<Form.Group>
<Form.ControlLabel>
<Toggle checked={showWeekNumbers} onChange={setShowWeekNumbers} />
Show week numbers
</Form.ControlLabel>
</Form.Group>
</Form>
</div>
</div>
);
};

const RadioLabel = ({ children }) => <label style={{ padding: 7 }}>{children}</label>;

ReactDOM.render(<App />, document.getElementById('root'));
```

<!--end-code-->
26 changes: 24 additions & 2 deletions docs/pages/components/calendar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
import React from 'react';

import { Calendar, Button, Tag, Popover, Whisper, Badge } from 'rsuite';
import {
Calendar,
Button,
Tag,
Popover,
Whisper,
Badge,
RadioGroup,
Radio,
Toggle,
Form
} from 'rsuite';
import DefaultPage from '@/components/Page';
import files from './files';
import ImportGuide from '@/components/ImportGuide';
Expand All @@ -14,7 +25,18 @@ export default function Page() {
<DefaultPage
inDocsComponents={inDocsComponents}
examples={['basic', 'compact']}
dependencies={{ Calendar, Button, Tag, Popover, Whisper, Badge }}
dependencies={{
Calendar,
Button,
Tag,
Popover,
Whisper,
Badge,
RadioGroup,
Radio,
Toggle,
Form
}}
sandboxFiles={files}
/>
);
Expand Down
36 changes: 24 additions & 12 deletions docs/pages/components/calendar/zh-CN/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,33 @@

<!--{include:`compact.md`}-->

### 自定义周

<!--{include:`week-start.md`}-->

- 使用 `weekStart` 指定一周的第一天。如果设置了 `isoWeek`，则忽略此属性。
- 使用 `isoWeek` 开启 [ISO 8601 标准][ISO-8601]， 每个日历星期从星期一开始，星期日为第 7 天。
- 使用 `showWeekNumbers` 显示周数。

## Props

### `<Calendar>`

<!-- prettier-sort-markdown-table -->

| 属性名称 | 类型`(默认值)` | 描述 |
| ------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| bordered | boolean | 显示边框 |
| cellClassName | (date: Date) => string \| undefined | 根据单元格日期自定义 class |
| compact | boolean | 紧凑型显示 |
| defaultValue | Date | 默认值 |
| isoWeek | boolean | [ISO 8601 标准](https://en.wikipedia.org/wiki/ISO_week_date)， 每个日历星期从星期一开始，星期日为第 7 天 |
| locale | [CalendarLocaleType](/zh/guide/i18n/#calendar) | 本地化的文本 |
| onChange | (date:Date) => void | 值改变后的回调函数 |
| onSelect | (date:Date) => void | 选择日期后的回调函数 |
| renderCell | (date: Date) => ReactNode | 自定义渲染日历单元格 |
| value | Date | 值 (`受控`) |
| 属性名称 | 类型`(默认值)` | 描述 |
| ------------- | ---------------------------------------------- | ----------------------------------------------------------------------------------- |
| bordered | boolean | 显示边框 |
| cellClassName | (date: Date) => string \| undefined | 根据单元格日期自定义 class |
| compact | boolean | 紧凑型显示 |
| defaultValue | Date | 默认值 |
| isoWeek | boolean | [ISO 8601 标准][ISO-8601]， 每个日历星期从星期一开始，星期日为第 7 天 |
| locale | [CalendarLocaleType](/zh/guide/i18n/#calendar) | 本地化配置 |
| onChange | (date: Date) => void | 值改变后的回调函数 |
| onSelect | (date: Date) => void | 选择日期后的回调函数 |
| renderCell | (date: Date) => ReactNode | 自定义渲染日历单元格 |
| value | Date | 值 (`受控`) |
| weekStart | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 `(0)` | 一周的第一天索引 (0 - 星期日)。如果设置了 `isoWeek`，则忽略此属性。<br/>![][5.62.0] |

[ISO-8601]: https://en.wikipedia.org/wiki/ISO_week_date
[5.62.0]: https://img.shields.io/badge/min-v5.62.0-blue
Loading

0 comments on commit 9edbbcd

Please sign in to comment.