Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sort README props table alphabetically #559

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Sort README props table alphabetically #559

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 35 additions & 35 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,53 +97,53 @@ class MyComponent extends Component {

Property | type | Default Value | Description
-------------------------------------|-----------|------------------|-----------------------------------------------------------------
locale | Object | enUS from locale | you can view full list from [here](https://github.com/hypeserver/react-date-range/tree/next/src/locale/index.js). Locales directly exported from [`date-fns/locales`](https://date-fns.org/docs/I18n#supported-languages).
ariaLabels | Object | {} | inserts aria-label to inner elements
calendarFocus(Calendar) | String | 'forwards' | Whether calendar focus month should be forward-driven or backwards-driven. can be 'forwards' or 'backwards'
className | String | | wrapper classname
months | Number | 1 | rendered month count
showSelectionPreview | Boolean | true | show preview on focused/hovered dates
showMonthAndYearPickers | Boolean | true | show select tags for month and year on calendar top, if false it will just display the month and year
rangeColors | String[] | | defines color for selection preview.
shownDate | Date | | initial focus date
minDate | Date | | defines minimum date. Disabled earlier dates
maxDate | Date | | defines maximum date. Disabled later dates
color(Calendar) | String | `#3d91ff` | defines color for selected date in Calendar
date(Calendar) | Date | | date value for Calendar
dateDisplayFormat | String | `MMM d, yyyy` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
dayContentRenderer | Function | null | Function to customize the rendering of Calendar Day. given a date is supposed to return what to render.
dayDisplayFormat | String | `d` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
direction | String | 'vertical' | direction of calendar months. can be `vertical` or `horizontal`
disabledDates | Date[] | [] | dates that are disabled
disabledDay | Func | | predicate function that disable day fn(date: Date)
scroll | Object | { enabled: false }| infinite scroll behaviour configuration. Check out [Infinite Scroll](#infinite-scrolled-mode) section
showMonthArrow | Boolean | true | show/hide month arrow button
navigatorRenderer | Func | | renderer for focused date navigation area. fn(currentFocusedDate: Date, changeShownDate: func, props: object)
ranges | *Object[] | [] | Defines ranges. array of range object
dragSelectionEnabled(Calendar) | bool | true | whether dates can be selected via drag n drop
editableDateInputs(Calendar) | bool | false | whether dates can be edited in the Calendar's input fields
endDatePlaceholder | String | `Continuous` | End Date Placeholder
fixedHeight | Boolean | false | Since some months require less than 6 lines to show, by setting this prop, you can force 6 lines for all months.
focusedRange(DateRange) | Object | | It defines which range and step are focused. Common initial value is `[0, 0]`; first value is index of ranges, second one is which step on date range(startDate or endDate).
initialFocusedRange(DateRange) | Object | | Initial value for focused range. See `focusedRange` for usage.
inputRanges(`DefinedRange`, `DateRangePicker`) | Array | [default input ranges](https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js) | -
locale | Object | enUS from locale | you can view full list from [here](https://github.com/hypeserver/react-date-range/tree/next/src/locale/index.js). Locales directly exported from [`date-fns/locales`](https://date-fns.org/docs/I18n#supported-languages).
maxDate | Date | | defines maximum date. Disabled later dates
minDate | Date | | defines minimum date. Disabled earlier dates
monthDisplayFormat | String | `MMM yyyy` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
months | Number | 1 | rendered month count
moveRangeOnFirstSelection(DateRange) | Boolean | false | move range on startDate selection. Otherwise endDate will replace with startDate unless `retainEndDateOnFirstSelection` is set to true.
retainEndDateOnFirstSelection(DateRange) | Boolean | false | Retain end date when the start date is changed, unless start date is later than end date. Ignored if `moveRangeOnFirstSelection` is set to true.
navigatorRenderer | Func | | renderer for focused date navigation area. fn(currentFocusedDate: Date, changeShownDate: func, props: object)
onChange(Calendar) | Func | | callback function for date changes. fn(date: Date)
onChange(DateRange) | Func | | callback function for range changes. fn(changes). changes contains changed ranges with new `startDate`/`endDate` properties.
color(Calendar) | String | `#3d91ff` | defines color for selected date in Calendar
date(Calendar) | Date | | date value for Calendar
showDateDisplay(DateRange) | Boolean | true | show/hide selection display row. Uses `dateDisplayFormat` for formatter
onShownDateChange(DateRange,Calendar)| Function | | Callback function that is called when the shown date changes
initialFocusedRange(DateRange) | Object | | Initial value for focused range. See `focusedRange` for usage.
focusedRange(DateRange) | Object | | It defines which range and step are focused. Common initial value is `[0, 0]`; first value is index of ranges, second one is which step on date range(startDate or endDate).
onPreviewChange(DateRange) | Object | | Callback function for preview changes
onRangeFocusChange(DateRange) | Object | | Callback function for focus changes
onShownDateChange(DateRange,Calendar)| Function | | Callback function that is called when the shown date changes
preventSnapRefocus(Calendar) | bool | false | prevents unneceessary refocus of shown range on selection
preview(DateRange) | Object | | displays a preview range and overwrite DateRange's default preview. Expected shape: `{ startDate: Date, endDate: Date, color: String }`
rangeColors | String[] | | defines color for selection preview.
ranges | *Object[] | [] | Defines ranges. array of range object
renderStaticRangeLabel(`DefinedRange`)| Function | | Callback function to be triggered for the static range configurations that have `hasCustomRendering: true` on them. Instead of rendering `staticRange.label`, return value of this callback will be rendered.
retainEndDateOnFirstSelection(DateRange) | Boolean | false | Retain end date when the start date is changed, unless start date is later than end date. Ignored if `moveRangeOnFirstSelection` is set to true.
scroll | Object | { enabled: false }| infinite scroll behaviour configuration. Check out [Infinite Scroll](#infinite-scrolled-mode) section
showDateDisplay(DateRange) | Boolean | true | show/hide selection display row. Uses `dateDisplayFormat` for formatter
showMonthAndYearPickers | Boolean | true | show select tags for month and year on calendar top, if false it will just display the month and year
showMonthArrow | Boolean | true | show/hide month arrow button
shownDate | Date | | initial focus date
showPreview(DateRange) | bool | true | visibility of preview
editableDateInputs(Calendar) | bool | false | whether dates can be edited in the Calendar's input fields
dragSelectionEnabled(Calendar) | bool | true | whether dates can be selected via drag n drop
calendarFocus(Calendar) | String | 'forwards' | Whether calendar focus month should be forward-driven or backwards-driven. can be 'forwards' or 'backwards'
preventSnapRefocus(Calendar) | bool | false | prevents unneceessary refocus of shown range on selection
onPreviewChange(DateRange) | Object | | Callback function for preview changes
dateDisplayFormat | String | `MMM d, yyyy` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
dayDisplayFormat | String | `d` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
weekdayDisplayFormat | String | `E` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
monthDisplayFormat | String | `MMM yyyy` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
weekStartsOn | Number | | Whether the week start day that comes from the locale will be overriden. Default value comes from your locale, if no local is specified, note that default locale is enUS
showSelectionPreview | Boolean | true | show preview on focused/hovered dates
startDatePlaceholder | String | `Early` | Start Date Placeholder
endDatePlaceholder | String | `Continuous` | End Date Placeholder
fixedHeight | Boolean | false | Since some months require less than 6 lines to show, by setting this prop, you can force 6 lines for all months.
renderStaticRangeLabel(`DefinedRange`)| Function | | Callback function to be triggered for the static range configurations that have `hasCustomRendering: true` on them. Instead of rendering `staticRange.label`, return value of this callback will be rendered.
staticRanges(`DefinedRange`, `DateRangePicker`) | Array | [default preDefined ranges](https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js) | -
inputRanges(`DefinedRange`, `DateRangePicker`) | Array | [default input ranges](https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js) | -
ariaLabels | Object | {} | inserts aria-label to inner elements
dayContentRenderer | Function | null | Function to customize the rendering of Calendar Day. given a date is supposed to return what to render.
weekdayDisplayFormat | String | `E` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
weekStartsOn | Number | | Whether the week start day that comes from the locale will be overriden. Default value comes from your locale, if no local is specified, note that default locale is enUS

*shape of range:
```js
Expand Down