Skip to content

Commit

Permalink
feat: add month and year pickers to DateRangePicker and RangeCalendar (…
Browse files Browse the repository at this point in the history 
…#3302)

* feat: add month and year pickers to DateRangePicker and RangeCalendar

* chore: update docs

* Update .changeset/kind-cobras-travel.md

* chore: react package version

---------

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
  • Loading branch information
@ryo-manba @jrgarciadev
ryo-manba and jrgarciadev committed Nov 6, 2024
1 parent 01c1916 commit b312788
Show file tree
Hide file tree
Showing 17 changed files with 117 additions and 33 deletions.
2 changes: 1 addition & 1 deletion .changeset/few-jars-flow.md
View file
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
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
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
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
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
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
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.

<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
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.

<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

0 comments on commit b312788

Please sign in to comment.