Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
11 changes: 2 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,7 @@ import "react-datepicker/dist/react-datepicker.css";

const Example = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
);
return <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />;
};
```

Expand Down Expand Up @@ -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
<DatePicker
selected={date}
onChange={handleDateChange}
showTimeSelect
dateFormat="Pp"
/>
<DatePicker selected={date} onChange={handleDateChange} showTimeSelect dateFormat="Pp" />
```

Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop)
Expand Down
12 changes: 5 additions & 7 deletions docs/calendar_container.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
`calendar_container` (component)
================================
# `calendar_container` (component)


| name | type | default value | description |
|---|---|---|---|
|`showTime`||`false`||
|`showTimeSelectOnly`||`false`||
| name | type | default value | description |
| -------------------- | ---- | ------------- | ----------- |
| `showTime` | | `false` | |
| `showTimeSelectOnly` | | `false` | |
21 changes: 10 additions & 11 deletions docs/calendar_icon.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
<CalendarIcon icon={<MyIconComponent />} onClick={myClickHandler} />

@returns The `CalendarIcon` component.
@returns The `CalendarIcon` component.

| name | type | default value | description |
|---|---|---|---|
|`className`||`""`||
|`icon`||||
|`onClick`||||
| name | type | default value | description |
| ----------- | ---- | ------------- | ----------- |
| `className` | | `""` | |
| `icon` | | | |
| `onClick` | | | |
20 changes: 9 additions & 11 deletions docs/click_outside_wrapper.md
Original file line number Diff line number Diff line change
@@ -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`||||
| name | type | default value | description |
| --------------------------- | ---- | ------------- | ----------- |
| `children` (required) | | | |
| `className` | | | |
| `containerRef` | | | |
| `ignoreClass` | | | |
| `onClickOutside` (required) | | | |
| `style` | | | |
2 changes: 1 addition & 1 deletion docs/datepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` | | |
Expand Down
188 changes: 93 additions & 95 deletions docs/index.md
Original file line number Diff line number Diff line change
@@ -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`||
| 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` | |
17 changes: 8 additions & 9 deletions docs/input_time.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
`input_time` (component)
========================
# `input_time` (component)

`InputTime` is a React component that manages time input.

Expand All @@ -16,10 +15,10 @@

@returns The `InputTime` component.

| name | type | default value | description |
|---|---|---|---|
|`customTimeInput`||||
|`date`||||
|`onChange`||||
|`timeInputLabel`||||
|`timeString`||||
| name | type | default value | description |
| ----------------- | ---- | ------------- | ----------- |
| `customTimeInput` | | | |
| `date` | | | |
| `onChange` | | | |
| `timeInputLabel` | | | |
| `timeString` | | | |
16 changes: 7 additions & 9 deletions docs/month_dropdown.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
`month_dropdown` (component)
============================
# `month_dropdown` (component)


| name | type | default value | description |
|---|---|---|---|
|`dropdownMode` (required)||||
|`locale`||||
|`onChange` (required)||||
|`useShortMonthInDropdown`||||
| name | type | default value | description |
| ------------------------- | ---- | ------------- | ----------- |
| `dropdownMode` (required) | | | |
| `locale` | | | |
| `onChange` (required) | | | |
| `useShortMonthInDropdown` | | | |
16 changes: 7 additions & 9 deletions docs/month_dropdown_options.md
Original file line number Diff line number Diff line change
@@ -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)||||
| name | type | default value | description |
| ----------------------- | ---- | ------------- | ----------- |
| `month` (required) | | | |
| `monthNames` (required) | | | |
| `onCancel` (required) | | | |
| `onChange` (required) | | | |
14 changes: 6 additions & 8 deletions docs/month_year_dropdown.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
`month_year_dropdown` (component)
=================================
# `month_year_dropdown` (component)


| name | type | default value | description |
|---|---|---|---|
|`dropdownMode` (required)||||
|`locale`||||
|`onChange` (required)||||
| name | type | default value | description |
| ------------------------- | ---- | ------------- | ----------- |
| `dropdownMode` (required) | | | |
| `locale` | | | |
| `onChange` (required) | | | |
Loading
Loading