diff --git a/README.md b/README.md index f0244e7a3c..d2c7d8fd7e 100644 --- a/README.md +++ b/README.md @@ -36,9 +36,7 @@ import "react-datepicker/dist/react-datepicker.css"; const Example = () => { const [startDate, setStartDate] = useState(new Date()); - return ( - setStartDate(date)} /> - ); + return setStartDate(date)} />; }; ``` @@ -69,12 +67,7 @@ See [here](https://github.com/Hacker0x01/react-datepicker/blob/main/docs/datepic You can also include a time picker by adding the showTimeSelect prop ```js - + ``` Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop) diff --git a/docs/calendar_container.md b/docs/calendar_container.md index fc339f9538..cca1da5c09 100644 --- a/docs/calendar_container.md +++ b/docs/calendar_container.md @@ -1,8 +1,6 @@ -`calendar_container` (component) -================================ +# `calendar_container` (component) - -| name | type | default value | description | -|---|---|---|---| -|`showTime`||`false`|| -|`showTimeSelectOnly`||`false`|| \ No newline at end of file +| name | type | default value | description | +| -------------------- | ---- | ------------- | ----------- | +| `showTime` | | `false` | | +| `showTimeSelectOnly` | | `false` | | diff --git a/docs/calendar_icon.md b/docs/calendar_icon.md index d5e964cbf9..f01046d723 100644 --- a/docs/calendar_icon.md +++ b/docs/calendar_icon.md @@ -1,13 +1,12 @@ -`calendar_icon` (component) -=========================== +# `calendar_icon` (component) `CalendarIcon` is a React component that renders an icon for a calendar. The icon can be a string representing a CSS class, a React node, or a default SVG icon. @component -@prop icon - The icon to be displayed. This can be a string representing a CSS class or a React node. -@prop className - An optional string representing additional CSS classes to be applied to the icon. -@prop onClick - An optional function to be called when the icon is clicked. +@prop icon - The icon to be displayed. This can be a string representing a CSS class or a React node. +@prop className - An optional string representing additional CSS classes to be applied to the icon. +@prop onClick - An optional function to be called when the icon is clicked. @example // To use a CSS class as the icon @@ -17,10 +16,10 @@ The icon can be a string representing a CSS class, a React node, or a default SV // To use a React node as the icon } onClick={myClickHandler} /> -@returns The `CalendarIcon` component. +@returns The `CalendarIcon` component. -| name | type | default value | description | -|---|---|---|---| -|`className`||`""`|| -|`icon`|||| -|`onClick`|||| \ No newline at end of file +| name | type | default value | description | +| ----------- | ---- | ------------- | ----------- | +| `className` | | `""` | | +| `icon` | | | | +| `onClick` | | | | diff --git a/docs/click_outside_wrapper.md b/docs/click_outside_wrapper.md index cd34f6d781..ccf323813e 100644 --- a/docs/click_outside_wrapper.md +++ b/docs/click_outside_wrapper.md @@ -1,12 +1,10 @@ -`click_outside_wrapper` (component) -=================================== +# `click_outside_wrapper` (component) - -| name | type | default value | description | -|---|---|---|---| -|`children` (required)|||| -|`className`|||| -|`containerRef`|||| -|`ignoreClass`|||| -|`onClickOutside` (required)|||| -|`style`|||| \ No newline at end of file +| name | type | default value | description | +| --------------------------- | ---- | ------------- | ----------- | +| `children` (required) | | | | +| `className` | | | | +| `containerRef` | | | | +| `ignoreClass` | | | | +| `onClickOutside` (required) | | | | +| `style` | | | | diff --git a/docs/datepicker.md b/docs/datepicker.md index c894ae9ad2..d3d31597da 100644 --- a/docs/datepicker.md +++ b/docs/datepicker.md @@ -73,7 +73,7 @@ General datepicker component. | | | `popperModifiers` | `object` | | | | `popperPlacement` | `enumpopperPlacementPositions` | | | -| `preventOpenOnFocus` | `bool` | false | When this is true, the datepicker will not automatically open when the date field is focused | +| `preventOpenOnFocus` | `bool` | false | When this is true, the datepicker will not automatically open when the date field is focused | | `readOnly` | `bool` | | | | `required` | `bool` | | | | `scrollableYearDropdown` | `bool` | | | diff --git a/docs/index.md b/docs/index.md index 8e714df577..098133f913 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,96 +1,94 @@ -`index` (component) -=================== +# `index` (component) - -| name | type | default value | description | -|---|---|---|---| -|`allowSameDay`||`false`|| -|`ariaDescribedBy`|||| -|`ariaInvalid`|||| -|`ariaLabelClose`|||| -|`ariaLabelledBy`|||| -|`ariaRequired`|||| -|`autoComplete`|||| -|`autoFocus`|||| -|`calendarClassName`|||| -|`calendarContainer`|||| -|`calendarIconClassName`|||| -|`calendarIconClassname`|||| -|`calendarStartDay`||`undefined`|| -|`className`|||| -|`clearButtonClassName`|||| -|`clearButtonTitle`|||| -|`closeOnScroll`|||| -|`customInput`|||| -|`customInputRef`|||| -|`customTimeInput`||`null`|| -|`dateFormat`||`"MM/dd/yyyy"`|| -|`dateFormatCalendar`||`"LLLL yyyy"`|| -|`disabled`||`false`|| -|`disabledKeyboardNavigation`||`false`|| -|`dropdownMode`||`"scroll"`|| -|`enableTabLoop`||`true`|| -|`endDate`|||| -|`excludeScrollbar`||`true`|| -|`focusSelectedMonth`||`false`|| -|`form`|||| -|`highlightDates`|||| -|`holidays`|||| -|`id`|||| -|`isClearable`|||| -|`monthsShown`||`1`|| -|`name`|||| -|`nextMonthAriaLabel`||`"Next Month"`|| -|`nextMonthButtonLabel`||`"Next Month"`|| -|`nextYearAriaLabel`||`"Next Year"`|| -|`nextYearButtonLabel`||`"Next Year"`|| -|`onBlur`|||| -|`onCalendarClose`|||| -|`onCalendarOpen`|||| -|`onChangeRaw`|||| -|`onClickOutside`|||| -|`onFocus`|||| -|`onInputClick`|||| -|`onInputError`|||| -|`onKeyDown`|||| -|`onSelect`|||| -|`open`|||| -|`placeholderText`|||| -|`popperClassName`|||| -|`preventOpenOnFocus`||`false`|| -|`previousMonthAriaLabel`||`"Previous Month"`|| -|`previousMonthButtonLabel`||`"Previous Month"`|| -|`previousYearAriaLabel`||`"Previous Year"`|| -|`previousYearButtonLabel`||`"Previous Year"`|| -|`readOnly`||`false`|| -|`required`|||| -|`selected`|||| -|`selectsDisabledDaysInRange`||`false`|| -|`shouldCloseOnSelect`||`true`|| -|`showDateSelect`|||| -|`showFourColumnMonthYearPicker`||`false`|| -|`showFullMonthYearPicker`||`false`|| -|`showIcon`|||| -|`showMonthYearPicker`||`false`|| -|`showPopperArrow`||`true`|| -|`showPreviousMonths`||`false`|| -|`showQuarterYearPicker`||`false`|| -|`showTimeInput`||`false`|| -|`showTimeSelect`||`false`|| -|`showTwoColumnMonthYearPicker`||`false`|| -|`showWeekPicker`||`false`|| -|`showYearPicker`||`false`|| -|`startDate`|||| -|`startOpen`|||| -|`strictParsing`||`false`|| -|`swapRange`||`false`|| -|`tabIndex`|||| -|`timeCaption`||`"Time"`|| -|`timeInputLabel`||`"Time"`|| -|`timeIntervals`||`30`|| -|`title`|||| -|`toggleCalendarOnIconClick`||`false`|| -|`usePointerEvent`||`false`|| -|`value`|||| -|`withPortal`||`false`|| -|`yearItemNumber`||`12`|| \ No newline at end of file +| name | type | default value | description | +| ------------------------------- | ---- | ------------------ | ----------- | +| `allowSameDay` | | `false` | | +| `ariaDescribedBy` | | | | +| `ariaInvalid` | | | | +| `ariaLabelClose` | | | | +| `ariaLabelledBy` | | | | +| `ariaRequired` | | | | +| `autoComplete` | | | | +| `autoFocus` | | | | +| `calendarClassName` | | | | +| `calendarContainer` | | | | +| `calendarIconClassName` | | | | +| `calendarIconClassname` | | | | +| `calendarStartDay` | | `undefined` | | +| `className` | | | | +| `clearButtonClassName` | | | | +| `clearButtonTitle` | | | | +| `closeOnScroll` | | | | +| `customInput` | | | | +| `customInputRef` | | | | +| `customTimeInput` | | `null` | | +| `dateFormat` | | `"MM/dd/yyyy"` | | +| `dateFormatCalendar` | | `"LLLL yyyy"` | | +| `disabled` | | `false` | | +| `disabledKeyboardNavigation` | | `false` | | +| `dropdownMode` | | `"scroll"` | | +| `enableTabLoop` | | `true` | | +| `endDate` | | | | +| `excludeScrollbar` | | `true` | | +| `focusSelectedMonth` | | `false` | | +| `form` | | | | +| `highlightDates` | | | | +| `holidays` | | | | +| `id` | | | | +| `isClearable` | | | | +| `monthsShown` | | `1` | | +| `name` | | | | +| `nextMonthAriaLabel` | | `"Next Month"` | | +| `nextMonthButtonLabel` | | `"Next Month"` | | +| `nextYearAriaLabel` | | `"Next Year"` | | +| `nextYearButtonLabel` | | `"Next Year"` | | +| `onBlur` | | | | +| `onCalendarClose` | | | | +| `onCalendarOpen` | | | | +| `onChangeRaw` | | | | +| `onClickOutside` | | | | +| `onFocus` | | | | +| `onInputClick` | | | | +| `onInputError` | | | | +| `onKeyDown` | | | | +| `onSelect` | | | | +| `open` | | | | +| `placeholderText` | | | | +| `popperClassName` | | | | +| `preventOpenOnFocus` | | `false` | | +| `previousMonthAriaLabel` | | `"Previous Month"` | | +| `previousMonthButtonLabel` | | `"Previous Month"` | | +| `previousYearAriaLabel` | | `"Previous Year"` | | +| `previousYearButtonLabel` | | `"Previous Year"` | | +| `readOnly` | | `false` | | +| `required` | | | | +| `selected` | | | | +| `selectsDisabledDaysInRange` | | `false` | | +| `shouldCloseOnSelect` | | `true` | | +| `showDateSelect` | | | | +| `showFourColumnMonthYearPicker` | | `false` | | +| `showFullMonthYearPicker` | | `false` | | +| `showIcon` | | | | +| `showMonthYearPicker` | | `false` | | +| `showPopperArrow` | | `true` | | +| `showPreviousMonths` | | `false` | | +| `showQuarterYearPicker` | | `false` | | +| `showTimeInput` | | `false` | | +| `showTimeSelect` | | `false` | | +| `showTwoColumnMonthYearPicker` | | `false` | | +| `showWeekPicker` | | `false` | | +| `showYearPicker` | | `false` | | +| `startDate` | | | | +| `startOpen` | | | | +| `strictParsing` | | `false` | | +| `swapRange` | | `false` | | +| `tabIndex` | | | | +| `timeCaption` | | `"Time"` | | +| `timeInputLabel` | | `"Time"` | | +| `timeIntervals` | | `30` | | +| `title` | | | | +| `toggleCalendarOnIconClick` | | `false` | | +| `usePointerEvent` | | `false` | | +| `value` | | | | +| `withPortal` | | `false` | | +| `yearItemNumber` | | `12` | | diff --git a/docs/input_time.md b/docs/input_time.md index 775fde09d0..c306859056 100644 --- a/docs/input_time.md +++ b/docs/input_time.md @@ -1,5 +1,4 @@ -`input_time` (component) -======================== +# `input_time` (component) `InputTime` is a React component that manages time input. @@ -16,10 +15,10 @@ @returns The `InputTime` component. -| name | type | default value | description | -|---|---|---|---| -|`customTimeInput`|||| -|`date`|||| -|`onChange`|||| -|`timeInputLabel`|||| -|`timeString`|||| \ No newline at end of file +| name | type | default value | description | +| ----------------- | ---- | ------------- | ----------- | +| `customTimeInput` | | | | +| `date` | | | | +| `onChange` | | | | +| `timeInputLabel` | | | | +| `timeString` | | | | diff --git a/docs/month_dropdown.md b/docs/month_dropdown.md index 38863e7a46..949116c24d 100644 --- a/docs/month_dropdown.md +++ b/docs/month_dropdown.md @@ -1,10 +1,8 @@ -`month_dropdown` (component) -============================ +# `month_dropdown` (component) - -| name | type | default value | description | -|---|---|---|---| -|`dropdownMode` (required)|||| -|`locale`|||| -|`onChange` (required)|||| -|`useShortMonthInDropdown`|||| \ No newline at end of file +| name | type | default value | description | +| ------------------------- | ---- | ------------- | ----------- | +| `dropdownMode` (required) | | | | +| `locale` | | | | +| `onChange` (required) | | | | +| `useShortMonthInDropdown` | | | | diff --git a/docs/month_dropdown_options.md b/docs/month_dropdown_options.md index 78ea7c96cb..29437b4ce4 100644 --- a/docs/month_dropdown_options.md +++ b/docs/month_dropdown_options.md @@ -1,10 +1,8 @@ -`month_dropdown_options` (component) -==================================== +# `month_dropdown_options` (component) - -| name | type | default value | description | -|---|---|---|---| -|`month` (required)|||| -|`monthNames` (required)|||| -|`onCancel` (required)|||| -|`onChange` (required)|||| \ No newline at end of file +| name | type | default value | description | +| ----------------------- | ---- | ------------- | ----------- | +| `month` (required) | | | | +| `monthNames` (required) | | | | +| `onCancel` (required) | | | | +| `onChange` (required) | | | | diff --git a/docs/month_year_dropdown.md b/docs/month_year_dropdown.md index 452969ef52..b2074e2a74 100644 --- a/docs/month_year_dropdown.md +++ b/docs/month_year_dropdown.md @@ -1,9 +1,7 @@ -`month_year_dropdown` (component) -================================= +# `month_year_dropdown` (component) - -| name | type | default value | description | -|---|---|---|---| -|`dropdownMode` (required)|||| -|`locale`|||| -|`onChange` (required)|||| \ No newline at end of file +| name | type | default value | description | +| ------------------------- | ---- | ------------- | ----------- | +| `dropdownMode` (required) | | | | +| `locale` | | | | +| `onChange` (required) | | | | diff --git a/docs/month_year_dropdown_options.md b/docs/month_year_dropdown_options.md index c8fa1e5ca9..a14c320913 100644 --- a/docs/month_year_dropdown_options.md +++ b/docs/month_year_dropdown_options.md @@ -1,14 +1,12 @@ -`month_year_dropdown_options` (component) -========================================= +# `month_year_dropdown_options` (component) - -| name | type | default value | description | -|---|---|---|---| -|`date` (required)|||| -|`dateFormat` (required)|||| -|`locale`|||| -|`maxDate` (required)|||| -|`minDate` (required)|||| -|`onCancel` (required)|||| -|`onChange` (required)|||| -|`scrollableMonthYearDropdown`|||| \ No newline at end of file +| name | type | default value | description | +| ----------------------------- | ---- | ------------- | ----------- | +| `date` (required) | | | | +| `dateFormat` (required) | | | | +| `locale` | | | | +| `maxDate` (required) | | | | +| `minDate` (required) | | | | +| `onCancel` (required) | | | | +| `onChange` (required) | | | | +| `scrollableMonthYearDropdown` | | | | diff --git a/docs/portal.md b/docs/portal.md index 8b344e37c4..b1fd3fd659 100644 --- a/docs/portal.md +++ b/docs/portal.md @@ -1,5 +1,4 @@ -`portal` (component) -==================== +# `portal` (component) `Portal` is a React component that allows you to render children into a DOM node that exists outside the DOM hierarchy of the parent component. @@ -10,8 +9,8 @@ that exists outside the DOM hierarchy of the parent component. @property {string} props.portalId - The id of the DOM node into which the `Portal` will render. @property {ShadowRoot} [props.portalHost] - The DOM node to host the `Portal`. -| name | type | default value | description | -|---|---|---|---| -|`children` (required)|||| -|`portalHost`|||| -|`portalId` (required)|||| \ No newline at end of file +| name | type | default value | description | +| --------------------- | ---- | ------------- | ----------- | +| `children` (required) | | | | +| `portalHost` | | | | +| `portalId` (required) | | | | diff --git a/docs/tab_loop.md b/docs/tab_loop.md index ea89b3a94c..349b326c6a 100644 --- a/docs/tab_loop.md +++ b/docs/tab_loop.md @@ -1,5 +1,4 @@ -`tab_loop` (component) -====================== +# `tab_loop` (component) `TabLoop` is a React component that manages tabbing behavior for its children. @@ -10,7 +9,7 @@ and "Shift Tab" on the first element will focus the last element @component @example - + @param props - The properties that define the `TabLoop` component. @@ -19,7 +18,7 @@ and "Shift Tab" on the first element will focus the last element @returns The `TabLoop` component. -| name | type | default value | description | -|---|---|---|---| -|`children`|||| -|`enableTabLoop`||`true`|| \ No newline at end of file +| name | type | default value | description | +| --------------- | ---- | ------------- | ----------- | +| `children` | | | | +| `enableTabLoop` | | `true` | | diff --git a/docs/time.md b/docs/time.md index f1a2dfa18f..ace375cc6e 100644 --- a/docs/time.md +++ b/docs/time.md @@ -1,20 +1,18 @@ -`time` (component) -================== +# `time` (component) - -| name | type | default value | description | -|---|---|---|---| -|`format`|||| -|`handleOnKeyDown`|||| -|`injectTimes`|||| -|`intervals`||`30`|| -|`locale`|||| -|`monthRef`|||| -|`onChange`|||| -|`openToDate`|||| -|`selected`|||| -|`showTimeCaption`||`true`|| -|`showTimeSelectOnly`|||| -|`timeCaption`||`"Time"`|| -|`timeClassName`|||| -|`todayButton`||`null`|| \ No newline at end of file +| name | type | default value | description | +| -------------------- | ---- | ------------- | ----------- | +| `format` | | | | +| `handleOnKeyDown` | | | | +| `injectTimes` | | | | +| `intervals` | | `30` | | +| `locale` | | | | +| `monthRef` | | | | +| `onChange` | | | | +| `openToDate` | | | | +| `selected` | | | | +| `showTimeCaption` | | `true` | | +| `showTimeSelectOnly` | | | | +| `timeCaption` | | `"Time"` | | +| `timeClassName` | | | | +| `todayButton` | | `null` | | diff --git a/docs/week_number.md b/docs/week_number.md index 832eb3088c..1fcaaac385 100644 --- a/docs/week_number.md +++ b/docs/week_number.md @@ -1,21 +1,19 @@ -`week_number` (component) -========================= +# `week_number` (component) - -| name | type | default value | description | -|---|---|---|---| -|`ariaLabelPrefix`||`"week "`|| -|`containerRef`|||| -|`date` (required)|||| -|`disabledKeyboardNavigation`|||| -|`handleOnKeyDown`|||| -|`inline`|||| -|`isInputFocused`|||| -|`isWeekDisabled`|||| -|`onClick`|||| -|`preSelection`|||| -|`selected`|||| -|`shouldFocusDayInline`|||| -|`showWeekNumber`|||| -|`showWeekPicker`|||| -|`weekNumber` (required)|||| \ No newline at end of file +| name | type | default value | description | +| ---------------------------- | ---- | ------------- | ----------- | +| `ariaLabelPrefix` | | `"week "` | | +| `containerRef` | | | | +| `date` (required) | | | | +| `disabledKeyboardNavigation` | | | | +| `handleOnKeyDown` | | | | +| `inline` | | | | +| `isInputFocused` | | | | +| `isWeekDisabled` | | | | +| `onClick` | | | | +| `preSelection` | | | | +| `selected` | | | | +| `shouldFocusDayInline` | | | | +| `showWeekNumber` | | | | +| `showWeekPicker` | | | | +| `weekNumber` (required) | | | | diff --git a/docs/year.md b/docs/year.md index 2f3eac94e6..9bf269e828 100644 --- a/docs/year.md +++ b/docs/year.md @@ -1,5 +1,4 @@ -`year` (component) -================== +# `year` (component) `Year` is a component that represents a year in a date picker. @@ -20,26 +19,26 @@ @property {(date: Date) => void} props.onYearMouseEnter - Function to handle mouse enter events on a year. @property {(date: Date) => void} props.onYearMouseLeave - Function to handle mouse leave events on a year. -| name | type | default value | description | -|---|---|---|---| -|`clearSelectingDate`|||| -|`date`|||| -|`disabledKeyboardNavigation`|||| -|`endDate`|||| -|`handleOnKeyDown`|||| -|`inline`|||| -|`onDayClick`|||| -|`onYearMouseEnter` (required)|||| -|`onYearMouseLeave` (required)|||| -|`preSelection`|||| -|`renderYearContent`|||| -|`selected`|||| -|`selectingDate`|||| -|`selectsEnd`|||| -|`selectsRange`|||| -|`selectsStart`|||| -|`setPreSelection`|||| -|`startDate`|||| -|`usePointerEvent`|||| -|`yearClassName`|||| -|`yearItemNumber`|||| \ No newline at end of file +| name | type | default value | description | +| ----------------------------- | ---- | ------------- | ----------- | +| `clearSelectingDate` | | | | +| `date` | | | | +| `disabledKeyboardNavigation` | | | | +| `endDate` | | | | +| `handleOnKeyDown` | | | | +| `inline` | | | | +| `onDayClick` | | | | +| `onYearMouseEnter` (required) | | | | +| `onYearMouseLeave` (required) | | | | +| `preSelection` | | | | +| `renderYearContent` | | | | +| `selected` | | | | +| `selectingDate` | | | | +| `selectsEnd` | | | | +| `selectsRange` | | | | +| `selectsStart` | | | | +| `setPreSelection` | | | | +| `startDate` | | | | +| `usePointerEvent` | | | | +| `yearClassName` | | | | +| `yearItemNumber` | | | | diff --git a/package.json b/package.json index 6c9c33c504..a567fa39a5 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "dependencies": { "@floating-ui/react": "^0.27.0", "clsx": "^2.1.1", - "date-fns": "^3.6.0" + "date-fns": "^4.1.0" }, "scripts": { "eslint": "eslint --ext .js,.jsx,.ts,.tsx ./src", diff --git a/yarn.lock b/yarn.lock index 8de4285d32..94d4dc5343 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4133,10 +4133,10 @@ __metadata: languageName: node linkType: hard -"date-fns@npm:^3.6.0": - version: 3.6.0 - resolution: "date-fns@npm:3.6.0" - checksum: 10c0/0b5fb981590ef2f8e5a3ba6cd6d77faece0ea7f7158948f2eaae7bbb7c80a8f63ae30b01236c2923cf89bb3719c33aeb150c715ea4fe4e86e37dcf06bed42fb6 +"date-fns@npm:^4.1.0": + version: 4.1.0 + resolution: "date-fns@npm:4.1.0" + checksum: 10c0/b79ff32830e6b7faa009590af6ae0fb8c3fd9ffad46d930548fbb5acf473773b4712ae887e156ba91a7b3dc30591ce0f517d69fd83bd9c38650fdc03b4e0bac8 languageName: node linkType: hard @@ -8368,7 +8368,7 @@ __metadata: babel-plugin-transform-react-remove-prop-types: "npm:^0.4.24" clsx: "npm:^2.1.1" core-js: "npm:^3.38.1" - date-fns: "npm:^3.6.0" + date-fns: "npm:^4.1.0" eslint: "npm:^8.57.0" eslint-config-prettier: "npm:^9.1.0" eslint-plugin-import: "npm:^2.29.1"