diff --git a/docs/pages/components/date-picker/en-US/index.md b/docs/pages/components/date-picker/en-US/index.md index 53d37fbe31..ac54b099fe 100644 --- a/docs/pages/components/date-picker/en-US/index.md +++ b/docs/pages/components/date-picker/en-US/index.md @@ -100,6 +100,10 @@ Clicking "Prev Day" in the example does not close the picker layer because the ` +### Custom render value + + + ### Native pickers If you only need to meet the simple date selection function, you can use the native pickers supported by the browser. @@ -128,67 +132,66 @@ Has keyboard interaction for the DateInput component by default. ### `` - - -| Property | Type`(default)` | Description | -| --------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -| appearance | 'default' \| 'subtle' `('default')` | Set picker appearence | -| block | boolean | Blocking an entire row | -| calendarDefaultDate | Date | Calendar panel default presentation date and time | -| caretAs | ElementType | Custom component for the caret icon | -| cleanable | boolean `(true)` | Whether the selected value can be cleared | -| container | HTMLElement \| (() => HTMLElement) | Sets the rendering container | -| defaultOpen | boolean | Default value of open property | -| defaultValue | Date | Default value | -| disabled | boolean | Whether disabled the component | -| ~disabledDate~ | (date:Date) => boolean | ⚠️`[Deprecated]` Use `shouldDisableDate` instead | -| ~disabledHours~ | (hour:number, date:Date) => boolean | ⚠️`[Deprecated]` Use `shouldDisableHour` instead | -| ~disabledMinutes~ | (minute:number, date:Date) => boolean | ⚠️`[Deprecated]` Use `shouldDisableMinute` instead | -| ~disabledSeconds~ | (second:number, date:Date) => boolean | ⚠️`[Deprecated]` Use `shouldDisableSecond` instead | -| editable | boolean `(true)` | Rendered as an input, the date can be entered via the keyboard | -| format | string `('yyyy-MM-dd')` | Format of the date when rendered in the input | -| hideHours | (hour:number, date:Date) => boolean | Hidden hours | -| hideMinutes | (minute:number, date:Date) => boolean | Hidden minutes | -| hideSeconds | (second:number, date:Date) => boolean | Hidden seconds | -| 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 | -| label | ReactNode | A label displayed at the beginning of toggle button | -| limitEndYear | number `(1000)` | Set the upper limit of the available year relative to the current selection date | -| limitStartYear | number | Set the lower limit of the available year relative to the current selection date | -| loading | boolean `(false)` | Whether to display a loading state indicator | -| locale | [CalendarLocaleType](/guide/i18n/#calendar) | Locale text | -| onChange | (date: Date) => void | Callback fired when value changed | -| onChangeCalendarDate | (date: Date, event) => void | Callback function that changes the calendar date. | -| onClean | (event) => void | Callback fired when value clean | -| onClose | () => void | Callback fired when close component | -| onEnter | () => void | Callback fired before the overlay transitions in | -| onEntered | () => void | Callback fired after the overlay finishes transitioning in | -| onEntering | () => void | Callback fired as the overlay begins to transition in | -| oneTap | boolean | One click to complete the selection date | -| onExit | () => void | Callback fired right before the overlay transitions out | -| onExited | () => void | Callback fired after the overlay finishes transitioning out | -| onExiting | () => void | Callback fired as the overlay begins to transition out | -| onNextMonth | (date: Date) => void | Switch to the callback function for the next Month | -| onOk | (date: Date, event) => void | Click the OK callback function | -| onOpen | () => void | Callback fired when open component | -| onPrevMonth | (date: Date) => void | Switch to the callback function for the previous Month | -| onSelect | (date: Date) => void | Callback fired when date or time is selected | -| onShortcutClick | (shortcut: Range, event) => void | Callback fired when shortcut clicked | -| onToggleMonthDropdown | (open: boolean) => void | Callback function that switches to the month view | -| onToggleTimeDropdown | (open: boolean) => void | Callback function that switches to the time view | -| open | boolean | Whether open the component | -| placeholder | string | Placeholder | -| placement | [Placement](#code-ts-placement-code) `('bottomStart')` | The placement of component | -| preventOverflow | boolean | Prevent floating element overflow | -| ranges | [Range[]](#code-ts-range-code) ([Ranges](#code-ts-ranges-code)) | Shortcut config | -| renderCell | (date: Date) => ReactNode | Custom calendar cell rendering
![](https://img.shields.io/badge/min-v5.54.0-blue) | -| shouldDisableDate | (date:Date) => boolean | Disabled date | -| shouldDisableHour | (hour:number, date:Date) => boolean | Disabled hours | -| shouldDisableMinute | (minute:number, date:Date) => boolean | Disabled minutes | -| shouldDisableSecond | (second:number, date:Date) => boolean | Disabled seconds | -| showMeridian | boolean | Display hours in 12 format | -| showWeekNumbers | boolean | Whether to show week numbers | -| size | 'lg' \| 'md' \| 'sm' \| 'xs' `('md')` | A picker can have different sizes | -| value | Date | Value (Controlled) | +| Property | Type`(default)` | Description | +| --------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | +| appearance | 'default' \| 'subtle' `('default')` | Set picker appearence | +| block | boolean | Blocking an entire row | +| calendarDefaultDate | Date | Calendar panel default presentation date and time | +| caretAs | ElementType | Custom component for the caret icon | +| cleanable | boolean `(true)` | Whether the selected value can be cleared | +| container | HTMLElement \| (() => HTMLElement) | Sets the rendering container | +| defaultOpen | boolean | Default value of open property | +| defaultValue | Date | Default value | +| disabled | boolean | Whether disabled the component | +| ~disabledDate~ | (date:Date) => boolean | ⚠️`[Deprecated]` Use `shouldDisableDate` instead | +| ~disabledHours~ | (hour:number, date:Date) => boolean | ⚠️`[Deprecated]` Use `shouldDisableHour` instead | +| ~disabledMinutes~ | (minute:number, date:Date) => boolean | ⚠️`[Deprecated]` Use `shouldDisableMinute` instead | +| ~disabledSeconds~ | (second:number, date:Date) => boolean | ⚠️`[Deprecated]` Use `shouldDisableSecond` instead | +| editable | boolean `(true)` | Rendered as an input, the date can be entered via the keyboard | +| format | string `('yyyy-MM-dd')` | Format of the date when rendered in the input | +| hideHours | (hour:number, date:Date) => boolean | Hidden hours | +| hideMinutes | (minute:number, date:Date) => boolean | Hidden minutes | +| hideSeconds | (second:number, date:Date) => boolean | Hidden seconds | +| isoWeek | boolean | [ISO 8601 standard][iso-8601], each calendar week begins on Monday and Sunday on the seventh day | +| label | ReactNode | A label displayed at the beginning of toggle button | +| limitEndYear | number `(1000)` | Set the upper limit of the available year relative to the current selection date | +| limitStartYear | number | Set the lower limit of the available year relative to the current selection date | +| loading | boolean `(false)` | Whether to display a loading state indicator | +| locale | [CalendarLocaleType](/guide/i18n/#calendar) | Locale text | +| onChange | (date: Date) => void | Callback fired when value changed | +| onChangeCalendarDate | (date: Date, event) => void | Callback function that changes the calendar date. | +| onClean | (event) => void | Callback fired when value clean | +| onClose | () => void | Callback fired when close component | +| onEnter | () => void | Callback fired before the overlay transitions in | +| onEntered | () => void | Callback fired after the overlay finishes transitioning in | +| onEntering | () => void | Callback fired as the overlay begins to transition in | +| oneTap | boolean | One click to complete the selection date | +| onExit | () => void | Callback fired right before the overlay transitions out | +| onExited | () => void | Callback fired after the overlay finishes transitioning out | +| onExiting | () => void | Callback fired as the overlay begins to transition out | +| onNextMonth | (date: Date) => void | Switch to the callback function for the next Month | +| onOk | (date: Date, event) => void | Click the OK callback function | +| onOpen | () => void | Callback fired when open component | +| onPrevMonth | (date: Date) => void | Switch to the callback function for the previous Month | +| onSelect | (date: Date) => void | Callback fired when date or time is selected | +| onShortcutClick | (shortcut: Range, event) => void | Callback fired when shortcut clicked | +| onToggleMonthDropdown | (open: boolean) => void | Callback function that switches to the month view | +| onToggleTimeDropdown | (open: boolean) => void | Callback function that switches to the time view | +| open | boolean | Whether open the component | +| placeholder | string | Placeholder | +| placement | [Placement](#code-ts-placement-code) `('bottomStart')` | The placement of component | +| preventOverflow | boolean | Prevent floating element overflow | +| ranges | [Range[]](#code-ts-range-code) ([Ranges](#code-ts-ranges-code)) | Shortcut config | +| renderCell | (date: Date) => ReactNode | Custom calendar cell rendering
![][5.54.0] | +| renderValue | (date: Date, format: string) => string | Custom render value | +| shouldDisableDate | (date:Date) => boolean | Disabled date | +| shouldDisableHour | (hour:number, date:Date) => boolean | Disabled hours | +| shouldDisableMinute | (minute:number, date:Date) => boolean | Disabled minutes | +| shouldDisableSecond | (second:number, date:Date) => boolean | Disabled seconds | +| showMeridian | boolean | Display hours in 12 format | +| showWeekNumbers | boolean | Whether to show week numbers | +| size | 'lg' \| 'md' \| 'sm' \| 'xs' `('md')` | A picker can have different sizes | +| value | Date | Value (Controlled) | @@ -211,3 +214,6 @@ const Ranges = [ } ]; ``` + +[ISO-8601]: https://en.wikipedia.org/wiki/ISO_week_date +[5.54.0]: https://img.shields.io/badge/min-v5.54.0-blue diff --git a/docs/pages/components/date-picker/fragments/render-value.md b/docs/pages/components/date-picker/fragments/render-value.md new file mode 100644 index 0000000000..64c7650e53 --- /dev/null +++ b/docs/pages/components/date-picker/fragments/render-value.md @@ -0,0 +1,22 @@ + + +```js +import { DatePicker } from 'rsuite'; +import format from 'date-fns/format'; + +const App = () => { + return ( + { + return format(value, 'EEE, d MMM'); + }} + /> + ); +}; + +ReactDOM.render(, document.getElementById('root')); +``` + + diff --git a/docs/pages/components/date-picker/index.tsx b/docs/pages/components/date-picker/index.tsx index ea405e62da..353421e2aa 100644 --- a/docs/pages/components/date-picker/index.tsx +++ b/docs/pages/components/date-picker/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { DatePicker, Button, InputGroup, Input, Stack } from 'rsuite'; +import format from 'date-fns/format'; import addDays from 'date-fns/addDays'; import subDays from 'date-fns/subDays'; import isBefore from 'date-fns/isBefore'; @@ -28,6 +29,7 @@ export default function Page() { InputGroup, Input, Stack, + format, addDays, subDays, isBefore, diff --git a/docs/pages/components/date-picker/zh-CN/index.md b/docs/pages/components/date-picker/zh-CN/index.md index da3911f6da..a01011ae76 100644 --- a/docs/pages/components/date-picker/zh-CN/index.md +++ b/docs/pages/components/date-picker/zh-CN/index.md @@ -100,6 +100,10 @@ DatePicker 是一个高度可定制的组件，用户可以输入或选择不同 +### 自定义渲染值 + + + ### 原生的选择器 如果您只需要满足简单的日期选择功能，完全可以使用浏览器支持的原生选择器。 @@ -128,68 +132,67 @@ DatePicker 是一个高度可定制的组件，用户可以输入或选择不同 ### `` - - -| 属性名称 | 类型`(默认值)` | 描述 | -| --------------------- | --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -| appearance | 'default' \| 'subtle' `('default')` | 设置外观 | -| block | boolean | 堵塞整行 | -| calendarDefaultDate | Date | 日历面板默认呈现的日期时间 | -| caretAs | ElementType | 自定义右侧箭头图标的组件 | -| cleanable | boolean `(true)` | 可以清除 | -| container | HTMLElement \| (() => HTMLElement) | 设置渲染的容器 | -| defaultOpen | boolean | 默认打开 | -| defaultValue | Date | 默认值 | -| disabled | boolean | 禁用组件 | -| ~disabledDate~ | (date:Date) => boolean | ⚠️`[已弃用]` 使用 `shouldDisableDate` 代替 | -| ~disabledHours~ | (hour:number, date:Date) => boolean | ⚠️`[已弃用]` 使用 `shouldDisableHour` 代替 | -| ~disabledMinutes~ | (minute:number, date:Date) => boolean | ⚠️`[已弃用]` 使用 `shouldDisableMinute` 代替 | -| ~disabledSeconds~ | (second:number, date:Date) => boolean | ⚠️`[已弃用]` 使用 `shouldDisableSecond` 代替 | -| editable | boolean `(true)` | 渲染为 Input 输入框，可以通过键盘输入日期 | -| format | string `('yyyy-MM-dd')` | 日期显示格式化 | -| hideHours | (hour:number, date:Date) => boolean | 隐藏小时 | -| hideMinutes | (minute:number, date:Date) => boolean | 隐藏分钟 | -| hideSeconds | (second:number, date:Date) => boolean | 隐藏秒 | -| isoWeek | boolean | [ISO 8601 标准](https://en.wikipedia.org/wiki/ISO_week_date)， 每个日历星期从星期一开始，星期日为第 7 天 | -| label | ReactNode | 在按钮开头显示的标签 | -| limitEndYear | number `(1000)` | 相对当前选择日期，设置可选年份上限 | -| limitStartYear | number | 相对当前选择日期，设置可选年份下限 | -| loading | boolean `(false)` | 是否显示一个加载中状态指示器 | -| locale | [CalendarLocaleType](/zh/guide/i18n/#calendar) | 本地化的文本 | -| menuClassName | string | 选项菜单的 className | -| onChange | (date: Date) => void | 值改变后的回调函数 | -| onChangeCalendarDate | (date: Date, event) => void | 日历日期改变后的回调函数 | -| onClean | (event) => void | 清除值后的回调函数 | -| onClose | () => void | 关闭回调函数 | -| onEnter | () => void | 显示前动画过渡的回调函数 | -| onEntered | () => void | 显示后动画过渡的回调函数 | -| onEntering | () => void | 显示中动画过渡的回调函数 | -| oneTap | boolean | 一个点击完成选择日期 | -| onExit | () => void | 退出前动画过渡的回调函数 | -| onExited | () => void | 退出后动画过渡的回调函数 | -| onExiting | () => void | 退出中动画过渡的回调函数 | -| onNextMonth | (date: Date) => void | 切换到下一月的回调函数 | -| onOk | (date: Date, event) => void | 点击确定后的回调函数 | -| onOpen | () => void | 打开回调函数 | -| onPrevMonth | (date: Date) => void | 切换到上一月的回调函数 | -| onSelect | (date: Date) => void | 选择日期或者时间的回调函数 | -| onShortcutClick | (shortcut: Range, event) => void | 点击快捷项的回调函数 | -| onToggleMonthDropdown | (open: boolean) => void | 切换到月份视图的回调函数 | -| onToggleTimeDropdown | (open: boolean) => void | 切换到时间视图的回调函数 | -| open | boolean | 打开 (受控) | -| placeholder | string | 没有值时候默认显示内容 | -| placement | [Placement](#code-ts-placement-code) `('bottomStart')` | 显示位置 | -| preventOverflow | boolean | 防止浮动元素溢出 | -| ranges | [Range[]](#code-ts-range-code) ([Ranges](#code-ts-ranges-code)) | 快捷项配置 | -| renderCell | (date: Date) => ReactNode | 自定义渲染日历单元格
![](https://img.shields.io/badge/min-v5.54.0-blue) | -| shouldDisableDate | (date:Date) => boolean | 禁用日期 | -| shouldDisableHour | (hour:number, date:Date) => boolean | 禁用小时 | -| shouldDisableMinute | (minute:number, date:Date) => boolean | 禁用分钟 | -| shouldDisableSecond | (second:number, date:Date) => boolean | 禁用秒 | -| showMeridian | boolean | 显示 12 小时制的时间格式 | -| showWeekNumbers | boolean | 显示周数量 | -| size | 'lg' \| 'md' \| 'sm' \| 'xs' `('md')` | 组件设置尺寸 | -| value | Date | 值`受控 | +| 属性名称 | 类型`(默认值)` | 描述 | +| --------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------- | +| appearance | 'default' \| 'subtle' `('default')` | 设置外观 | +| block | boolean | 堵塞整行 | +| calendarDefaultDate | Date | 日历面板默认呈现的日期时间 | +| caretAs | ElementType | 自定义右侧箭头图标的组件 | +| cleanable | boolean `(true)` | 可以清除 | +| container | HTMLElement \| (() => HTMLElement) | 设置渲染的容器 | +| defaultOpen | boolean | 默认打开 | +| defaultValue | Date | 默认值 | +| disabled | boolean | 禁用组件 | +| ~disabledDate~ | (date:Date) => boolean | ⚠️`[已弃用]` 使用 `shouldDisableDate` 代替 | +| ~disabledHours~ | (hour:number, date:Date) => boolean | ⚠️`[已弃用]` 使用 `shouldDisableHour` 代替 | +| ~disabledMinutes~ | (minute:number, date:Date) => boolean | ⚠️`[已弃用]` 使用 `shouldDisableMinute` 代替 | +| ~disabledSeconds~ | (second:number, date:Date) => boolean | ⚠️`[已弃用]` 使用 `shouldDisableSecond` 代替 | +| editable | boolean `(true)` | 渲染为 Input 输入框，可以通过键盘输入日期 | +| format | string `('yyyy-MM-dd')` | 日期显示格式化 | +| hideHours | (hour:number, date:Date) => boolean | 隐藏小时 | +| hideMinutes | (minute:number, date:Date) => boolean | 隐藏分钟 | +| hideSeconds | (second:number, date:Date) => boolean | 隐藏秒 | +| isoWeek | boolean | [ISO 8601 标准][iso-8601]， 每个日历星期从星期一开始，星期日为第 7 天 | +| label | ReactNode | 在按钮开头显示的标签 | +| limitEndYear | number `(1000)` | 相对当前选择日期，设置可选年份上限 | +| limitStartYear | number | 相对当前选择日期，设置可选年份下限 | +| loading | boolean `(false)` | 是否显示一个加载中状态指示器 | +| locale | [CalendarLocaleType](/zh/guide/i18n/#calendar) | 本地化的文本 | +| menuClassName | string | 选项菜单的 className | +| onChange | (date: Date) => void | 值改变后的回调函数 | +| onChangeCalendarDate | (date: Date, event) => void | 日历日期改变后的回调函数 | +| onClean | (event) => void | 清除值后的回调函数 | +| onClose | () => void | 关闭回调函数 | +| onEnter | () => void | 显示前动画过渡的回调函数 | +| onEntered | () => void | 显示后动画过渡的回调函数 | +| onEntering | () => void | 显示中动画过渡的回调函数 | +| oneTap | boolean | 一个点击完成选择日期 | +| onExit | () => void | 退出前动画过渡的回调函数 | +| onExited | () => void | 退出后动画过渡的回调函数 | +| onExiting | () => void | 退出中动画过渡的回调函数 | +| onNextMonth | (date: Date) => void | 切换到下一月的回调函数 | +| onOk | (date: Date, event) => void | 点击确定后的回调函数 | +| onOpen | () => void | 打开回调函数 | +| onPrevMonth | (date: Date) => void | 切换到上一月的回调函数 | +| onSelect | (date: Date) => void | 选择日期或者时间的回调函数 | +| onShortcutClick | (shortcut: Range, event) => void | 点击快捷项的回调函数 | +| onToggleMonthDropdown | (open: boolean) => void | 切换到月份视图的回调函数 | +| onToggleTimeDropdown | (open: boolean) => void | 切换到时间视图的回调函数 | +| open | boolean | 打开 (受控) | +| placeholder | string | 没有值时候默认显示内容 | +| placement | [Placement](#code-ts-placement-code) `('bottomStart')` | 显示位置 | +| preventOverflow | boolean | 防止浮动元素溢出 | +| ranges | [Range[]](#code-ts-range-code) ([Ranges](#code-ts-ranges-code)) | 快捷项配置 | +| renderCell | (date: Date) => ReactNode | 自定义渲染日历单元格
![][5.54.0] | +| renderValue | (date: Date) => ReactNode | 自定义渲染值 | +| shouldDisableDate | (date:Date) => boolean | 禁用日期 | +| shouldDisableHour | (hour:number, date:Date) => boolean | 禁用小时 | +| shouldDisableMinute | (minute:number, date:Date) => boolean | 禁用分钟 | +| shouldDisableSecond | (second:number, date:Date) => boolean | 禁用秒 | +| showMeridian | boolean | 显示 12 小时制的时间格式 | +| showWeekNumbers | boolean | 显示周数量 | +| size | 'lg' \| 'md' \| 'sm' \| 'xs' `('md')` | 组件设置尺寸 | +| value | Date | 值`受控 | @@ -212,3 +215,6 @@ const Ranges = [ } ]; ``` + +[ISO-8601]: https://en.wikipedia.org/wiki/ISO_week_date +[5.54.0]: https://img.shields.io/badge/min-v5.54.0-blue diff --git a/docs/pages/components/date-range-picker/en-US/index.md b/docs/pages/components/date-range-picker/en-US/index.md index 82ecd910f2..6987caca0e 100644 --- a/docs/pages/components/date-range-picker/en-US/index.md +++ b/docs/pages/components/date-range-picker/en-US/index.md @@ -110,6 +110,10 @@ const { combine, allowedMaxDays, beforeToday } = DateRangePicker; +### Custom render value + + + ### Hide Header @@ -132,55 +136,56 @@ Has keyboard interaction for the DateRangeInput component by default. ### `` -| Property | Type`(default)` | Description | -| -------------------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -| appearance | 'default' | 'subtle' `('default')` | Set picker appearence | -| block | boolean | Blocking an entire row | -| caretAs | ElementType | Custom component for the caret icon | -| character | string `(' ~ ')` | The character that separates two dates | -| cleanable | boolean `(true)` | Whether the selected value can be cleared | -| container | HTMLElement | (() => HTMLElement) | Sets the rendering container | -| defaultCalendarValue | [ValueType](#code-ts-value-type-code) | Default calendar panel date | -| defaultOpen | boolean | Default value of open property | -| defaultValue | [ValueType](#code-ts-value-type-code) | Default value | -| disabled | boolean | Whether disabled the component | -| ~disabledDate~ | (date:Date) => boolean | ⚠️`[Deprecated]` Use `shouldDisableDate` instead | -| editable | boolean `(true)` | Rendered as an input, the date can be entered via the keyboard | -| format | string `('yyyy-MM-dd')` | Format of the date when rendered in the input | -| hoverRange | unions: 'week', 'month' or (date: Date) => [ValueType](#code-ts-value-type-code) | The date range that will be selected when you click on the date | -| 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 | -| label | ReactNode | A label displayed at the beginning of toggle button | -| limitEndYear | number `(1000)` | Sets the upper limit of the available year relative to the current selection date | -| limitStartYear | number | Sets the lower limit of the available year relative to the current selection date | -| loading | boolean `(false)` | Whether to display a loading state indicator | -| locale | [CalendarLocaleType](/guide/i18n/#calendar) | Locale text | -| onChange | (value: [ValueType](#code-ts-value-type-code)) => void | Callback fired when value changed | -| onClean | (event) => void | Callback fired when value clean | -| onClose | () => void | Callback fired when close component | -| onEnter | () => void | Callback fired before the overlay transitions in | -| onEntered | () => void | Callback fired after the overlay finishes transitioning in | -| onEntering | () => void | Callback fired as the overlay begins to transition in | -| oneTap | boolean | Whether to click once on selected date range，Can be used with hoverRange | -| onExit | () => void | Callback fired right before the overlay transitions out | -| onExited | () => void | Callback fired after the overlay finishes transitioning out | -| onExiting | () => void | Callback fired as the overlay begins to transition out | -| onOk | (value: [ValueType](#code-ts-value-type-code)) => void | Callback fired when clicked OK button | -| onOpen | () => void | Callback fired when open component | -| onSelect | (date:Date) => void | Callback fired when date is selected | -| onShortcutClick | (shortcut: Range, event) => void | Callback fired when shortcut clicked | -| open | boolean | whether open the component | -| placeholder | string | Setting placeholders | -| placement | [Placement](#code-ts-placement-code) `('bottomStart')` | The placement of component | -| preventOverflow | boolean | Prevent floating element overflow | -| ranges | [Range[]](#code-ts-range-code) ([Ranges](#code-ts-ranges-code)) | Set predefined date ranges the user can select from. Default: `Today`,`Yesterday`，`Last 7 days` | -| renderTitle | (date: Date) => ReactNode | Custom render for month's title | -| shouldDisableDate | [DisabledDateFunction](#code-ts-disabled-date-function-code) | Disabled date | -| showHeader | boolean `(true)` | Whether to display the formatted date range at the header of the calendar.
![](https://img.shields.io/badge/min-v5.52.0-blue) | -| showMeridian | boolean | Display hours in 12 format | -| showOneCalendar | boolen | Whether to show only one calendar | -| showWeekNumbers | boolean | Whether to show week numbers | -| size | 'lg' | 'md' | 'sm' | 'xs' `('md')` | A picker can have different sizes | -| value | [ValueType](#code-ts-value-type-code) | Value (Controlled) | +| Property | Type`(default)` | Description | +| -------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | +| appearance | 'default' \| 'subtle' `('default')` | Set picker appearence | +| block | boolean | Blocking an entire row | +| caretAs | ElementType | Custom component for the caret icon | +| character | string `(' ~ ')` | The character that separates two dates | +| cleanable | boolean `(true)` | Whether the selected value can be cleared | +| container | HTMLElement \| (() => HTMLElement) | Sets the rendering container | +| defaultCalendarValue | [Date, Date] | Default calendar panel date | +| defaultOpen | boolean | Default value of open property | +| defaultValue | [Date, Date] | Default value | +| disabled | boolean | Whether disabled the component | +| ~disabledDate~ | (date:Date) => boolean | ⚠️`[Deprecated]` Use `shouldDisableDate` instead | +| editable | boolean `(true)` | Rendered as an input, the date can be entered via the keyboard | +| format | string `('yyyy-MM-dd')` | Format of the date when rendered in the input | +| hoverRange | unions: 'week', 'month' or (date: Date) => [Date, Date] | The date range that will be selected when you click on the date | +| isoWeek | boolean | [ISO 8601 standard][ISO-8601], each calendar week begins on Monday and Sunday on the seventh day | +| label | ReactNode | A label displayed at the beginning of toggle button | +| limitEndYear | number `(1000)` | Sets the upper limit of the available year relative to the current selection date | +| limitStartYear | number | Sets the lower limit of the available year relative to the current selection date | +| loading | boolean `(false)` | Whether to display a loading state indicator | +| locale | [CalendarLocaleType](/guide/i18n/#calendar) | Locale text | +| onChange | (value: [Date, Date]) => void | Callback fired when value changed | +| onClean | (event) => void | Callback fired when value clean | +| onClose | () => void | Callback fired when close component | +| onEnter | () => void | Callback fired before the overlay transitions in | +| onEntered | () => void | Callback fired after the overlay finishes transitioning in | +| onEntering | () => void | Callback fired as the overlay begins to transition in | +| oneTap | boolean | Whether to click once on selected date range，Can be used with hoverRange | +| onExit | () => void | Callback fired right before the overlay transitions out | +| onExited | () => void | Callback fired after the overlay finishes transitioning out | +| onExiting | () => void | Callback fired as the overlay begins to transition out | +| onOk | (value: [Date, Date]) => void | Callback fired when clicked OK button | +| onOpen | () => void | Callback fired when open component | +| onSelect | (date:Date) => void | Callback fired when date is selected | +| onShortcutClick | (shortcut: Range, event) => void | Callback fired when shortcut clicked | +| open | boolean | whether open the component | +| placeholder | string | Setting placeholders | +| placement | [Placement](#code-ts-placement-code) `('bottomStart')` | The placement of component | +| preventOverflow | boolean | Prevent floating element overflow | +| ranges | [Range[]](#code-ts-range-code) ([Ranges](#code-ts-ranges-code)) | Set predefined date ranges the user can select from. Default: `Today`,`Yesterday`，`Last 7 days` | +| renderTitle | (date: Date) => ReactNode | Custom render for month's title | +| renderValue | (date: [Date, Date], format: string) => string | Custom render value | +| shouldDisableDate | [DisabledDateFunction](#code-ts-disabled-date-function-code) | Disabled date | +| showHeader | boolean `(true)` | Whether to display the formatted date range at the header of the calendar
![][5.52.0] | +| showMeridian | boolean | Display hours in 12 format | +| showOneCalendar | boolen | Whether to show only one calendar | +| showWeekNumbers | boolean | Whether to show week numbers | +| size | 'lg' \| 'md' \| 'sm' \| 'xs' `('md')` | A picker can have different sizes | +| value | [Date, Date] | Value (Controlled) | @@ -238,3 +243,6 @@ const Ranges = [ } ]; ``` + +[ISO-8601]: https://en.wikipedia.org/wiki/ISO_week_date +[5.52.0]: https://img.shields.io/badge/min-v5.52.0-blue diff --git a/docs/pages/components/date-range-picker/fragments/render-value.md b/docs/pages/components/date-range-picker/fragments/render-value.md new file mode 100644 index 0000000000..f4b2991c1e --- /dev/null +++ b/docs/pages/components/date-range-picker/fragments/render-value.md @@ -0,0 +1,22 @@ + + +```js +import { DateRangePicker } from 'rsuite'; +import format from 'date-fns/format'; + +const App = () => { + return ( + { + return format(start, 'EEE, d MMM') + ' - ' + format(end, 'EEE, d MMM'); + }} + /> + ); +}; + +ReactDOM.render(, document.getElementById('root')); +``` + + diff --git a/docs/pages/components/date-range-picker/index.tsx b/docs/pages/components/date-range-picker/index.tsx index 0a069a0cc6..a906f54640 100644 --- a/docs/pages/components/date-range-picker/index.tsx +++ b/docs/pages/components/date-range-picker/index.tsx @@ -10,6 +10,7 @@ import endOfMonth from 'date-fns/endOfMonth'; import subDays from 'date-fns/subDays'; import isAfter from 'date-fns/isAfter'; import addMonths from 'date-fns/addMonths'; +import format from 'date-fns/format'; import { BsCalendar2MonthFill } from 'react-icons/bs'; import { FaCalendar, @@ -32,6 +33,7 @@ export default function Page() { DateRangePicker, Button, Divider, + format, addDays, subDays, isAfter, diff --git a/docs/pages/components/date-range-picker/zh-CN/index.md b/docs/pages/components/date-range-picker/zh-CN/index.md index 9367668be2..a70df6dd12 100644 --- a/docs/pages/components/date-range-picker/zh-CN/index.md +++ b/docs/pages/components/date-range-picker/zh-CN/index.md @@ -112,6 +112,10 @@ const { combine, allowedMaxDays, beforeToday } = DateRangePicker; +### 自定义渲染值 + + + ### 不显示头部 @@ -134,66 +138,61 @@ const { combine, allowedMaxDays, beforeToday } = DateRangePicker; ### `` -| 属性名称 | 类型`(默认值)` | 描述 | -| -------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -| appearance | 'default' | 'subtle' `('default')` | 设置外观 | -| block | boolean | 堵塞整行 | -| caretAs | ElementType | 自定义右侧箭头图标的组件 | -| character | string `(' ~ ')` | 两个日期之间的分隔符 | -| cleanable | boolean `(true)` | 可以清除选择值 | -| container | HTMLElement | (() => HTMLElement) | 设置渲染的容器 | -| defaultCalendarValue | [ValueType](#code-ts-value-type-code) | 默认日历面板日期 | -| defaultOpen | boolean | 默认打开 | -| defaultValue | [ValueType](#code-ts-value-type-code) | 默认值 | -| disabled | boolean | 禁用组件 | -| ~disabledDate~ | (date:Date) => boolean | ⚠️`[已弃用]` 使用 `shouldDisableDate` 代替 | -| editable | boolean `(true)` | 渲染为 Input 输入框，可以通过键盘输入日期 | -| format | string `('yyyy-MM-dd')` | 日期显示格式化 | -| hoverRange | unions: 'week', 'month' or (date: Date) => [ValueType](#code-ts-value-type-code) | 点击日期时将选中的日期范围 | -| isoWeek | boolean | [ISO 8601 标准](https://en.wikipedia.org/wiki/ISO_week_date)， 每个日历星期从星期一开始，星期日为第 7 天 | -| label | ReactNode | 在按钮开头显示的标签 | -| limitEndYear | number `(1000)` | 相对当前选择日期，设置可选年份上限 | -| limitStartYear | number | 相对当前选择日期，设置可选年份下限 | -| loading | boolean `(false)` | 是否显示一个加载中状态指示器 | -| locale | [CalendarLocaleType](/zh/guide/i18n/#calendar) | 本地化的文本 | -| menuClassName | string | 选项菜单的 className | -| onChange | (value: [ValueType](#code-ts-value-type-code)) => void | 值改变后的回调函数 | -| onClean | (event) => void | 清除值后的回调函数 | -| onClose | () => void | 关闭回调函数 | -| onEnter | () => void | 显示前动画过渡的回调函数 | -| onEntered | () => void | 显示后动画过渡的回调函数 | -| onEntering | () => void | 显示中动画过渡的回调函数 | -| oneTap | boolean | 是否点击一次就选定日期范围，可配合 hoverRange 使用 | -| onExit | () => void | 退出前动画过渡的回调函数 | -| onExited | () => void | 退出后动画过渡的回调函数 | -| onExiting | () => void | 退出中动画过渡的回调函数 | -| onOk | (value: [ValueType](#code-ts-value-type-code)) => void | 点击 `确定` 按钮后的回调函数 | -| onOpen | () => void | 打开回调函数 | -| onSelect | (data:Date) => void | 选择日期的回调函数 | -| onShortcutClick | (shortcut: Range, event) => void | 点击快捷项的回调函数 | -| open | boolean | 打开 (受控) | -| placeholder | string | 没有值时候默认显示内容 | -| placement | [Placement](#code-ts-placement-code) `('bottomStart')` | 显示位置 | -| preventOverflow | boolean | 防止浮动元素溢出 | -| ranges | [Range[]](#code-ts-range-code) ([Ranges](#code-ts-ranges-code)) | 快捷项配置，默认 `今天`,`昨天`，`最近 7 天` | -| renderTitle | (date: Date) => ReactNode | 自定义渲染日历面板上的月份标题 | -| shouldDisableDate | [DisabledDateFunction](#code-ts-disabled-date-function-code) | 禁用日期 | -| showHeader | boolean `(true)` | 是否在日历面板的头部显示格式化的日期范围。
![](https://img.shields.io/badge/min-v5.52.0-blue) | -| showMeridian | boolean | 显示 12 小时制的时间格式 | -| showOneCalendar | boolen | 显示一个日历 | -| showWeekNumbers | boolean | 显示周数量 | -| size | 'lg' | 'md' | 'sm' | 'xs' `('md')` | 设置组件尺寸 | -| value | [ValueType](#code-ts-value-type-code) | 值 `受控` | +| 属性名称 | 类型`(默认值)` | 描述 | +| -------------------- | --------------------------------------------------------------- | --------------------------------------------------------------------- | +| appearance | 'default' \| 'subtle' `('default')` | 设置外观 | +| block | boolean | 堵塞整行 | +| caretAs | ElementType | 自定义右侧箭头图标的组件 | +| character | string `(' ~ ')` | 两个日期之间的分隔符 | +| cleanable | boolean `(true)` | 可以清除选择值 | +| container | HTMLElement \| (() => HTMLElement) | 设置渲染的容器 | +| defaultCalendarValue | [Date, Date] | 默认日历面板日期 | +| defaultOpen | boolean | 默认打开 | +| defaultValue | [Date, Date] | 默认值 | +| disabled | boolean | 禁用组件 | +| ~disabledDate~ | (date:Date) => boolean | ⚠️`[已弃用]` 使用 `shouldDisableDate` 代替 | +| editable | boolean `(true)` | 渲染为 Input 输入框，可以通过键盘输入日期 | +| format | string `('yyyy-MM-dd')` | 日期显示格式化 | +| hoverRange | unions: 'week', 'month' or (date: Date) => [Date, Date] | 点击日期时将选中的日期范围 | +| isoWeek | boolean | [ISO 8601 标准][ISO-8601]， 每个日历星期从星期一开始，星期日为第 7 天 | +| label | ReactNode | 在按钮开头显示的标签 | +| limitEndYear | number `(1000)` | 相对当前选择日期，设置可选年份上限 | +| limitStartYear | number | 相对当前选择日期，设置可选年份下限 | +| loading | boolean `(false)` | 是否显示一个加载中状态指示器 | +| locale | [CalendarLocaleType](/zh/guide/i18n/#calendar) | 本地化的文本 | +| menuClassName | string | 选项菜单的 className | +| onChange | (value: [Date, Date]) => void | 值改变后的回调函数 | +| onClean | (event) => void | 清除值后的回调函数 | +| onClose | () => void | 关闭回调函数 | +| onEnter | () => void | 显示前动画过渡的回调函数 | +| onEntered | () => void | 显示后动画过渡的回调函数 | +| onEntering | () => void | 显示中动画过渡的回调函数 | +| oneTap | boolean | 是否点击一次就选定日期范围，可配合 hoverRange 使用 | +| onExit | () => void | 退出前动画过渡的回调函数 | +| onExited | () => void | 退出后动画过渡的回调函数 | +| onExiting | () => void | 退出中动画过渡的回调函数 | +| onOk | (value: [Date, Date]) => void | 点击 `确定` 按钮后的回调函数 | +| onOpen | () => void | 打开回调函数 | +| onSelect | (data:Date) => void | 选择日期的回调函数 | +| onShortcutClick | (shortcut: Range, event) => void | 点击快捷项的回调函数 | +| open | boolean | 打开 (受控) | +| placeholder | string | 没有值时候默认显示内容 | +| placement | [Placement](#code-ts-placement-code) `('bottomStart')` | 显示位置 | +| preventOverflow | boolean | 防止浮动元素溢出 | +| ranges | [Range[]](#code-ts-range-code) ([Ranges](#code-ts-ranges-code)) | 快捷项配置，默认 `今天`,`昨天`，`最近 7 天` | +| renderTitle | (date: Date) => ReactNode | 自定义渲染日历面板上的月份标题 | +| renderValue | (date: [Date, Date], format: string) => string | Custom render value | +| shouldDisableDate | [DisabledDateFunction](#code-ts-disabled-date-function-code) | 禁用日期 | +| showHeader | boolean `(true)` | 是否在日历面板的头部显示格式化的日期范围
![][5.52.0] | +| showMeridian | boolean | 显示 12 小时制的时间格式 | +| showOneCalendar | boolen | 显示一个日历 | +| showWeekNumbers | boolean | 显示周数量 | +| size | 'lg' \| 'md' \| 'sm' \| 'xs' `('md')` | 设置组件尺寸 | +| value | [Date, Date]˝ | 值 `受控` | -### `ts:ValueType` - -```ts -type ValueType = [Date, Date]; -``` - ### `ts:DisabledDateFunction` ```ts @@ -241,3 +240,6 @@ const Ranges = [ } ]; ``` + +[ISO-8601]: https://en.wikipedia.org/wiki/ISO_week_date +[5.52.0]: https://img.shields.io/badge/min-v5.52.0-blue diff --git a/src/DatePicker/DatePicker.tsx b/src/DatePicker/DatePicker.tsx index 6b38e73c62..7f052137ce 100644 --- a/src/DatePicker/DatePicker.tsx +++ b/src/DatePicker/DatePicker.tsx @@ -46,6 +46,7 @@ import { onMenuKeyDown } from '../internals/Picker'; import { OverlayCloseCause } from '../internals/Overlay/OverlayTrigger'; +import Input from '../Input'; import DateInput from '../DateInput'; import InputGroup from '../InputGroup'; import { splitRanges, deprecatedPropTypes, getRestProps } from './utils'; @@ -172,6 +173,11 @@ export interface DatePickerProps /** Called when clean */ onClean?: (event: React.MouseEvent) => void; + /** + * Custom rendering of the selected date. + */ + renderValue?: (value: Date, format: string) => string; + /** * Custom rendering calendar cell content. * @@ -196,7 +202,7 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa editable = true, defaultValue, disabled, - readOnly, + readOnly: readOnly, plaintext, // todo Not consistent with locale.formatDayPattern format: formatStr = 'yyyy-MM-dd', @@ -237,6 +243,7 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa onToggleTimeDropdown, onShortcutClick, renderCell, + renderValue, disabledDate: DEPRECATED_disabledDate, disabledHours: DEPRECATED_disabledHours, disabledMinutes: DEPRECATED_disabledMinutes, @@ -613,6 +620,21 @@ const DatePicker: RsRefForwardingComponent<'div', DatePickerProps> = React.forwa const [ariaProps, rest] = partitionHTMLProps(restProps, { htmlProps: [], includeAria: true }); const invalidValue = value && isErrorValue(value); + // Custom rendering of the selected value + let customValue: string | null = null; + + // Input box is read-only when the component is uneditable or loading state + let inputReadOnly: boolean = readOnly || !editable || loading || false; + + if (typeof renderValue === 'function' && value) { + customValue = renderValue(value, formatStr); + + // If the custom rendering value, the input box is read-only + inputReadOnly = true; + } + + const TargetInput = customValue ? Input : DateInput; + return ( = React.forwa {label} - + { expect(screen.getByRole('textbox')).to.have.value('2017-08-14'); }); + it('Should render a custom value', () => { + render( + format(value, 'EEE, d MMM')} + /> + ); + + expect(screen.getByRole('textbox')).to.have.value('Mon, 13 May'); + }); + it('Should open a dialog containing grid view of dates in a month', () => { render(); expect(screen.getByRole('dialog')).to.be.visible; diff --git a/src/DatePicker/types.ts b/src/DatePicker/types.ts index 924a0dde0f..c0b889954b 100644 --- a/src/DatePicker/types.ts +++ b/src/DatePicker/types.ts @@ -49,9 +49,4 @@ export interface DeprecatedProps { * @deprecated Use {@link shouldDisableSecond} instead */ disabledSeconds?: (second: number, date: Date) => boolean; - - /** - * @deprecated - */ - renderValue?: (value: Date, format: string) => string; } diff --git a/src/DateRangePicker/DateRangePicker.tsx b/src/DateRangePicker/DateRangePicker.tsx index e558d11aa9..a82e02d535 100644 --- a/src/DateRangePicker/DateRangePicker.tsx +++ b/src/DateRangePicker/DateRangePicker.tsx @@ -62,6 +62,7 @@ import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange import { deprecatePropTypeNew, oneOf } from '../internals/propTypes'; import DateRangePickerContext from './DateRangePickerContext'; import DateRangeInput from '../DateRangeInput'; +import Input from '../Input'; import InputGroup from '../InputGroup'; import Header from './Header'; @@ -165,12 +166,13 @@ export interface DateRangePickerProps onClean?: (event: React.MouseEvent) => void; /** - * Custom render value - * @deprecated + * Custom rendering of the selected date range. */ - renderValue?: (value: DateRange, format: string) => React.ReactNode; + renderValue?: (value: DateRange, format: string) => string; - /** Custom render for calendar title */ + /** + * Custom render for calendar title + */ renderTitle?: (date: Date) => React.ReactNode; } @@ -253,6 +255,7 @@ const DateRangePicker = React.forwardRef((props: DateRangePickerProps, ref) => { onSelect, onShortcutClick, renderTitle, + renderValue, ...restProps } = props; @@ -916,6 +919,21 @@ const DateRangePicker = React.forwardRef((props: DateRangePickerProps, ref) => { const showCleanButton = cleanable && hasValue && !readOnly; const invalidValue = value && isErrorValue(value); + // Custom rendering of the selected value + let customValue: string | null = null; + + // Input box is read-only when the component is uneditable or loading state + let inputReadOnly: boolean = readOnly || !editable || loading || false; + + if (typeof renderValue === 'function' && value) { + customValue = renderValue(value, formatStr); + + // If the custom rendering value, the input box is read-only + inputReadOnly = true; + } + + const TargetInput = customValue ? Input : DateRangeInput; + return ( { {label} - { expect(screen.getByRole('textbox')).to.have.value('11/11/2019 01:00:00 ~ 11/12/2019 01:00:00'); }); + it('Should render a custom value', () => { + render( + { + return format(start, 'EEE, d MMM') + ' ~ ' + format(end, 'EEE, d MMM'); + }} + /> + ); + + expect(screen.getByRole('textbox')).to.have.value('Mon, 13 May ~ Tue, 14 May'); + }); + it('Should select date time successfully', () => { const defaultValue = [new Date(2019, 10, 11, 0, 0, 0), new Date(2019, 11, 11, 0, 0, 0)] as [ Date,