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 3 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
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": minor
"@nextui-org/date-picker": minor
jrgarciadev marked this conversation as resolved.
Show resolved Hide resolved
---

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 @@ -19,6 +19,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 @@ -43,5 +44,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
Loading