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

feat: add month and year pickers to DateRangePicker and RangeCalendar #3302

Merged
merged 7 commits into from
Nov 4, 2024
Merged

feat: add month and year pickers to DateRangePicker and RangeCalendar #3302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
69ef48b
feat: add month and year pickers to DateRangePicker and RangeCalendar
ryo-manba Jun 22, 2024
ce7ee58
chore: update docs
ryo-manba Jun 30, 2024
ca5c72b
Merge branch 'canary' into feat/month-year-pickers
ryo-manba Jun 30, 2024
9bd1673
fix: conflicts
jrgarciadev Nov 4, 2024
b1559fb
Update .changeset/kind-cobras-travel.md
jrgarciadev Nov 4, 2024
67a1829
chore: react package version
jrgarciadev Nov 4, 2024
70a92fc
Merge branch 'feat/month-year-pickers' of github.com:nextui-org/nextu…
jrgarciadev Nov 4, 2024
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
2 changes: 1 addition & 1 deletion .changeset/few-jars-flow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"@nextui-org/tabs": patch
"@nextui-org/tooltip": patch
"@nextui-org/user": patch
"@nextui-org/react": patch
"@nextui-org/react": minor
"@nextui-org/system": patch
"@nextui-org/system-rsc": patch
"@nextui-org/use-aria-accordion": patch
Expand Down
6 changes: 6 additions & 0 deletions .changeset/kind-cobras-travel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@nextui-org/calendar": patch
"@nextui-org/date-picker": patch
---

Add month and year picker to DateRangePicker and RangeCalendar (#3089, #3090)
2 changes: 2 additions & 0 deletions apps/docs/content/components/date-range-picker/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import visibleMonth from "./visible-month";
import pageBehavior from "./page-behavior";
import nonContigous from "./non-contiguous";
import presets from "./presets";
import withMonthAndYearPickers from "./with-month-and-year-pickers";
import customStyles from "./custom-styles";

export const dateRangePickerContent = {
Expand All @@ -45,5 +46,6 @@ export const dateRangePickerContent = {
pageBehavior,
nonContigous,
presets,
withMonthAndYearPickers,
customStyles,
};
21 changes: 21 additions & 0 deletions apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
const App = `import {DateRangePicker} from "@nextui-org/react";

export default function App() {
return (
<div className="w-full max-w-xl flex flex-row gap-4">
<DateRangePicker
label="Birth Date"
variant="bordered"
showMonthAndYearPickers
/>
</div>
);
}`;

const react = {
"/App.jsx": App,
};

export default {
...react,
};
2 changes: 2 additions & 0 deletions apps/docs/content/components/range-calendar/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import internationalCalendars from "./international-calendars";
import visibleMonths from "./visible-months";
import pageBehaviour from "./page-behaviour";
import presets from "./presets";
import withMonthAndYearPicker from "./with-month-and-year-picker";

export const rangeCalendarContent = {
usage,
Expand All @@ -28,4 +29,5 @@ export const rangeCalendarContent = {
visibleMonths,
pageBehaviour,
presets,
withMonthAndYearPicker,
};
18 changes: 18 additions & 0 deletions apps/docs/content/components/range-calendar/with-month-and-year-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
const App = `import {RangeCalendar} from "@nextui-org/react";

export default function App() {
return (
<RangeCalendar
aria-label="Date (Show Month and Year Picker)"
showMonthAndYearPickers
/>
);
}`;

const react = {
"/App.jsx": App,
};

export default {
...react,
};
4 changes: 2 additions & 2 deletions apps/docs/content/docs/components/calendar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ This example validates that the selected date is a weekday and not a weekend acc

### With Month And Year Picker

Calendar supports month and year picker for rapid selection.
Calendar supports month and year picker for rapid selection. You can enable this feature by setting `showMonthAndYearPickers` to `true`. However, if `visibleMonths` is set to a number greater than 1, this feature will be disabled.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Improve clarity in documentation.

The sentence can be improved for better clarity.

- Calendar supports month and year picker for rapid selection. You can enable this feature by setting `showMonthAndYearPickers` to `true`. However, if `visibleMonths` is set to a number greater than 1, this feature will be disabled.
+ The calendar supports month and year pickers for rapid selection. Enable this feature by setting `showMonthAndYearPickers` to `true`. Note that if `visibleMonths` is set to a number greater than 1, this feature will be disabled.
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Calendar supports month and year picker for rapid selection. You can enable this feature by setting `showMonthAndYearPickers` to `true`. However, if `visibleMonths` is set to a number greater than 1, this feature will be disabled.
Calendar supports month and year picker for rapid selection. You can enable this feature by setting `showMonthAndYearPickers` to `true`. However, if `visibleMonths` is set to a number greater than 1, this feature will be disabled.
```
```suggestion
The calendar supports month and year pickers for rapid selection. Enable this feature by setting `showMonthAndYearPickers` to `true`. Note that if `visibleMonths` is set to a number greater than 1, this feature will be disabled.


<CodeDemo title="With Month And Year Picker" files={calendarContent.withMonthAndYearPicker} />

Expand Down Expand Up @@ -206,7 +206,7 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
| minValue | `DateValue` | The minimum allowed date that a user may select. | - |
| maxValue | `DateValue` | The maximum allowed date that a user may select. | - |
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the time input. | `default` |
| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop | `1` |
| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop. | `1` |
| focusedValue | `DateValue` | Controls the currently focused date within the calendar. | - |
| defaultFocusedValue | `DateValue` | The date that is focused when the calendar first mounts (uncountrolled). | - |
| calendarWidth | `number` \| `string` | The width to be applied to the calendar component. This value is multiplied by the `visibleMonths` number to determine the total width of the calendar. | `256` |
Expand Down
11 changes: 6 additions & 5 deletions apps/docs/content/docs/components/date-picker.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,8 @@ You can also pass an error message as a function. This allows for dynamic error

### With Month and Year Pickers

You can show month and year pickers in the calendar popover by setting the `showMonthAndYearPickers` property to `true`. However, passing a number greater than 1 to the `visibleMonths` prop will disable this feature.

Comment on lines +86 to +87
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Improve wording for clarity.

The sentence can be improved for better clarity.

- You can show month and year pickers in the calendar popover by setting the `showMonthAndYearPickers` property to `true`. However, passing a number greater than 1 to the `visibleMonths` prop will disable this feature.
+ To enable month and year pickers in the calendar popover, set the `showMonthAndYearPickers` property to `true`. Note that setting the `visibleMonths` prop to a number greater than 1 will disable this feature.
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
You can show month and year pickers in the calendar popover by setting the `showMonthAndYearPickers` property to `true`. However, passing a number greater than 1 to the `visibleMonths` prop will disable this feature.
You can show month and year pickers in the calendar popover by setting the `showMonthAndYearPickers` property to `true`. Note that setting the `visibleMonths` prop to a number greater than 1 will disable this feature.

<CodeDemo title="With Month and Year Pickers" files={datePickerContent.withMonthAndYearPickers} />

### With Time Fields
Expand Down Expand Up @@ -319,7 +321,7 @@ import {I18nProvider} from "@react-aria/i18n";
| color | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the date input. | `default` |
| size | `sm` \| `md` \| `lg` | The size of the date input. | `md` |
| radius | `none` \| `sm` \| `md` \| `lg` \| `full` | The radius of the date input. | - |
| defaultValue | `string` \| undefined | The default value of the date-picker (uncontrolled). | - |
| defaultValue | `string` | The default value of the date-picker (uncontrolled). | - |
| placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-picker. | - |
| description | `ReactNode` | A description for the date-picker. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
Expand All @@ -332,13 +334,12 @@ import {I18nProvider} from "@react-aria/i18n";
| isReadOnly | `boolean` | Whether the date-picker can be selected but not changed by the user. | |
| isDisabled | `boolean` | Whether the date-picker is disabled. | `false` |
| isInvalid | `boolean` | Whether the date-picker is invalid. | `false` |
| visibleMonths | `number` \| `undefined` | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop. | `1` |
| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop. | `1` |
| selectorIcon | `ReactNode` | The icon to toggle the date picker popover. Usually a calendar icon. | |
| pageBehavior | `PageBehavior` \| `undefined` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. | `visible` |
| visibleMonths | `number` \| `undefined` | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop. | `1` |
| pageBehavior | `PageBehavior` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. | `visible` |
| calendarWidth | `number` | The width to be applied to the calendar component. | `256` |
| CalendarTopContent | `ReactNode` | Top content to be rendered in the calendar component. | |
| isDateUnavailable | `((date: DateValue) => boolean)` \| `undefined` | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. |
| isDateUnavailable | `((date: DateValue) => boolean)` | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | |
| autoFocus | `boolean` | Whether the element should receive focus on render. | `false` |
| hourCycle | `12` \| `24` | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale. | - |
| granularity | `day` \| `hour` \| `minute` \| `second` | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates. | - |
Expand Down
Loading