mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat: add month and year pickers to DateRangePicker and RangeCalendar (#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>
This commit is contained in:
Ryo Matsukawa
GitHub
parent
9f6839faf9
commit
a4a1d8fb69
@ -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
|
||||
|
||||
6
.changeset/kind-cobras-travel.md
Normal file
6
.changeset/kind-cobras-travel.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"@nextui-org/calendar": patch
|
||||
"@nextui-org/date-picker": patch
|
||||
---
|
||||
|
||||
Add month and year picker to DateRangePicker and RangeCalendar (#3089, #3090)
|
||||
@ -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 = {
|
||||
@ -45,5 +46,6 @@ export const dateRangePickerContent = {
|
||||
pageBehavior,
|
||||
nonContigous,
|
||||
presets,
|
||||
withMonthAndYearPickers,
|
||||
customStyles,
|
||||
};
|
||||
|
||||
@ -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,
|
||||
};
|
||||
@ -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,
|
||||
@ -28,4 +29,5 @@ export const rangeCalendarContent = {
|
||||
visibleMonths,
|
||||
pageBehaviour,
|
||||
presets,
|
||||
withMonthAndYearPicker,
|
||||
};
|
||||
|
||||
@ -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,
|
||||
};
|
||||
@ -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} />
|
||||
|
||||
@ -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` |
|
||||
|
||||
@ -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
|
||||
@ -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. | - |
|
||||
@ -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. | - |
|
||||
|
||||
@ -96,6 +96,12 @@ You can also pass an error message as a function. This allows for dynamic error
|
||||
|
||||
<CodeDemo title="With Error Message Function" files={dateRangePickerContent.errorMessageFunction} />
|
||||
|
||||
### 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={dateRangePickerContent.withMonthAndYearPickers} />
|
||||
|
||||
### With Time Fields
|
||||
|
||||
DateRangePicker automatically includes time fields when a `CalendarDateTime` or `ZonedDateTime` object is provided as the value.
|
||||
@ -364,7 +370,7 @@ You can customize the `DateRangePicker` component by passing custom Tailwind CSS
|
||||
| radius | `none` \| `sm` \| `md` \| `lg` \| `full` | The radius of the date input. | - |
|
||||
| minValue | `RangeValue<CalendarDate \| CalendarDateTime \| ZonedDateTime>` \| `undefined` \| `null` | The minimum value of the date-range-picker. | - |
|
||||
| maxValue | `RangeValue<CalendarDate \| CalendarDateTime \| ZonedDateTime>` \| `undefined` \| `null` | The maximum value of the date-range-picker. | - |
|
||||
| defaultValue | `string` \| undefined | The default value of the date-range-picker (uncontrolled). | - |
|
||||
| defaultValue | `string` | The default value of the date-range-picker (uncontrolled). | - |
|
||||
| placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-range-picker. | - |
|
||||
| description | `ReactNode` | A description for the date-range-picker. Provides a hint such as specific requirements for what to choose. | - |
|
||||
| errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - |
|
||||
@ -383,18 +389,19 @@ You can customize the `DateRangePicker` component by passing custom Tailwind CSS
|
||||
| isInvalid | `boolean` | Whether the date-range-picker is invalid. | `false` |
|
||||
| selectorIcon | `ReactNode` | The icon to toggle the date picker popover. Usually a calendar icon. | |
|
||||
| pageBehavior | `single` \| `visible` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. | `visible` |
|
||||
| visibleMonths | `number` | The number of months to display at once. Up to 3 months are supported. | `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` |
|
||||
| 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. | - |
|
||||
| hideTimeZone | `boolean` | Whether to hide the time zone abbreviation. | `false` |
|
||||
| allowsNonContiguousRanges | `boolean` | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected. | false |
|
||||
| allowsNonContiguousRanges | `boolean` | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected. | `false` |
|
||||
| shouldForceLeadingZeros | `boolean` | Whether to always show leading zeros in the month, day, and hour fields. | `true` |
|
||||
| calendarWidth | `number` | The width to be applied to the calendar component. | `256` |
|
||||
| CalendarTopContent | `ReactNode` | Top content to be rendered in the calendar component. | |
|
||||
| CalendarBottomContent | `ReactNode` | Bottom content to be rendered in the calendar component. | |
|
||||
| allowsNonContiguousRanges | `boolean` | enables a range to be selected even if there are unavailable dates in the middle | false |
|
||||
| popoverProps | `PopoverProps` | Props to be passed to the popover component. | `{ placement: "bottom", triggerScaleOnOpen: false, offset: 13 }` |
|
||||
| showMonthAndYearPickers | `boolean` | Whether the calendar should show month and year pickers. | `false` |
|
||||
| allowsNonContiguousRanges | `boolean` | enables a range to be selected even if there are unavailable dates in the middle | `false` |
|
||||
| popoverProps | [PopoverProps](/docs/components/popover#api) | Props to be passed to the popover component. | `{ placement: "bottom", triggerScaleOnOpen: false, offset: 13 }` |
|
||||
| selectorButtonProps | `ButtonProps` | Props to be passed to the selector button component. | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
|
||||
| selectorButtonPlacement | `start` \| `end` | The position of the selector button. | `end` |
|
||||
| calendarProps | `CalendarProps` | Props to be passed to the selector button component. | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
|
||||
|
||||
@ -107,6 +107,12 @@ This example validates that the selected date is a weekday and not a weekend acc
|
||||
|
||||
<CodeDemo title="Invalid Date" files={rangeCalendarContent.invalidDate} />
|
||||
|
||||
### With Month And Year Picker
|
||||
|
||||
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={rangeCalendarContent.withMonthAndYearPicker} />
|
||||
|
||||
### International Calendars
|
||||
|
||||
Calendar supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string), passed to the `Provider` component.
|
||||
@ -208,12 +214,13 @@ 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. | `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` | |
|
||||
| pageBehavior | `PageBehavior` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. | `visible` | |
|
||||
| weekdayStyle | `"narrow" \|"short" \| "long" \| undefined` | The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name. | `narrow` | |
|
||||
| showMonthAndYearPickers | `boolean` | Whether the label should be crossed out. | `false` |
|
||||
| allowsNonContiguousRanges | `boolean` | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected. | `false` | |
|
||||
| isDisabled | `boolean` | Whether the calendar is disabled. | `false` | |
|
||||
| isReadOnly | `boolean` | Whether the calendar value is immutable. | `false` | |
|
||||
|
||||
@ -99,6 +99,7 @@ export function CalendarHeader(props: CalendarHeaderProps) {
|
||||
return showMonthAndYearPickers ? (
|
||||
<Button
|
||||
{...headerProps}
|
||||
aria-label="switch to year and month view"
|
||||
disableAnimation={disableAnimation}
|
||||
endContent={<ChevronDownIcon className="chevron-icon" />}
|
||||
onKeyDown={handleKeyDown}
|
||||
|
||||
@ -10,10 +10,7 @@ import {CalendarBase} from "./calendar-base";
|
||||
interface Props<T extends DateValue>
|
||||
extends Omit<
|
||||
UseRangeCalendarProps<T>,
|
||||
| "isHeaderExpanded"
|
||||
| "onHeaderExpandedChange"
|
||||
| "isHeaderWrapperExpanded"
|
||||
| "showMonthAndYearPickers"
|
||||
"isHeaderExpanded" | "onHeaderExpandedChange" | "isHeaderWrapperExpanded"
|
||||
> {}
|
||||
|
||||
function RangeCalendar<T extends DateValue>(props: Props<T>, ref: ForwardedRef<HTMLDivElement>) {
|
||||
|
||||
@ -163,7 +163,12 @@ interface Props extends NextUIBaseProps {
|
||||
export type UseCalendarBasePropsComplete = Props & CalendarVariantProps & AriaCalendarPropsBase;
|
||||
|
||||
// Omit internal props
|
||||
export type UseCalendarBaseProps = Omit<UseCalendarBasePropsComplete, "isRange">;
|
||||
export type UseCalendarBaseProps = Omit<UseCalendarBasePropsComplete, "isRange"> & {
|
||||
/**
|
||||
* Props for the button picker, which is used to select the month, year and expand the header.
|
||||
*/
|
||||
buttonPickerProps?: ButtonProps;
|
||||
};
|
||||
|
||||
export type ContextType<T extends CalendarState | RangeCalendarState> = {
|
||||
state: T;
|
||||
@ -225,11 +230,9 @@ export function useCalendarBase(originalProps: UseCalendarBasePropsComplete) {
|
||||
/**
|
||||
* Determines whether to show the month and year pickers.
|
||||
* The pickers are shown if `showMonthAndYearPickers` is true,
|
||||
* there is only one visible month (`visibleMonths === 1`),
|
||||
* and it's not a range calendar (`!isRange`).
|
||||
* there is only one visible month (`visibleMonths === 1`).
|
||||
*/
|
||||
const showMonthAndYearPickers =
|
||||
originalProps.showMonthAndYearPickers && visibleMonths === 1 && !originalProps?.isRange;
|
||||
const showMonthAndYearPickers = originalProps.showMonthAndYearPickers && visibleMonths === 1;
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
|
||||
@ -13,14 +13,7 @@ import {chain, mergeProps} from "@react-aria/utils";
|
||||
import {ContextType, useCalendarBase, UseCalendarBaseProps} from "./use-calendar-base";
|
||||
import {CalendarBaseProps} from "./calendar-base";
|
||||
|
||||
interface Props extends UseCalendarBaseProps {
|
||||
/**
|
||||
* Props for the button picker, which is used to select the month, year and expand the header.
|
||||
*/
|
||||
buttonPickerProps?: ButtonProps;
|
||||
}
|
||||
|
||||
export type UseCalendarProps<T extends DateValue> = Props & AriaCalendarProps<T>;
|
||||
export type UseCalendarProps<T extends DateValue> = UseCalendarBaseProps & AriaCalendarProps<T>;
|
||||
|
||||
export function useCalendar<T extends DateValue>({
|
||||
buttonPickerProps: buttonPickerPropsProp,
|
||||
|
||||
@ -8,6 +8,8 @@ import {useRangeCalendar as useAriaRangeCalendar} from "@react-aria/calendar";
|
||||
import {useRangeCalendarState} from "@react-stately/calendar";
|
||||
import {createCalendar} from "@internationalized/date";
|
||||
import {clsx} from "@nextui-org/shared-utils";
|
||||
import {ButtonProps} from "@nextui-org/button";
|
||||
import {chain} from "@react-aria/utils";
|
||||
|
||||
import {ContextType, useCalendarBase, UseCalendarBaseProps} from "./use-calendar-base";
|
||||
import {CalendarBaseProps} from "./calendar-base";
|
||||
@ -22,6 +24,7 @@ interface Props<T extends DateValue> extends UseCalendarBaseProps, NextUIBasePro
|
||||
export type UseRangeCalendarProps<T extends DateValue> = Props<T> & AriaRangeCalendarProps<T>;
|
||||
|
||||
export function useRangeCalendar<T extends DateValue>({
|
||||
buttonPickerProps: buttonPickerPropsProp,
|
||||
className,
|
||||
...originalProps
|
||||
}: UseRangeCalendarProps<T>) {
|
||||
@ -41,6 +44,7 @@ export function useRangeCalendar<T extends DateValue>({
|
||||
visibleMonths,
|
||||
disableAnimation,
|
||||
createCalendar: createCalendarProp,
|
||||
showMonthAndYearPickers,
|
||||
baseProps,
|
||||
getPrevButtonProps,
|
||||
getNextButtonProps,
|
||||
@ -72,6 +76,11 @@ export function useRangeCalendar<T extends DateValue>({
|
||||
|
||||
const baseStyles = clsx(classNames?.base, className);
|
||||
|
||||
const buttonPickerProps: ButtonProps = {
|
||||
...buttonPickerPropsProp,
|
||||
onPress: chain(buttonPickerPropsProp?.onPress, () => setIsHeaderExpanded(!isHeaderExpanded)),
|
||||
};
|
||||
|
||||
const getBaseCalendarProps = (props = {}): CalendarBaseProps => {
|
||||
return {
|
||||
...baseProps,
|
||||
@ -79,6 +88,7 @@ export function useRangeCalendar<T extends DateValue>({
|
||||
showHelper,
|
||||
topContent,
|
||||
bottomContent,
|
||||
buttonPickerProps,
|
||||
calendarRef: domRef,
|
||||
calendarProps: calendarProps,
|
||||
prevButtonProps: getPrevButtonProps(prevButtonProps),
|
||||
@ -102,6 +112,7 @@ export function useRangeCalendar<T extends DateValue>({
|
||||
isHeaderExpanded,
|
||||
setIsHeaderExpanded,
|
||||
visibleMonths,
|
||||
showMonthAndYearPickers,
|
||||
classNames,
|
||||
disableAnimation,
|
||||
}),
|
||||
@ -114,6 +125,7 @@ export function useRangeCalendar<T extends DateValue>({
|
||||
setIsHeaderExpanded,
|
||||
visibleMonths,
|
||||
disableAnimation,
|
||||
showMonthAndYearPickers,
|
||||
],
|
||||
);
|
||||
|
||||
|
||||
@ -45,8 +45,6 @@ export default {
|
||||
},
|
||||
} as Meta<typeof RangeCalendar>;
|
||||
|
||||
delete calendar.defaultVariants?.showMonthAndYearPickers;
|
||||
|
||||
const defaultProps = {
|
||||
...calendar.defaultVariants,
|
||||
visibleMonths: 1,
|
||||
@ -378,6 +376,14 @@ export const InvalidDates = {
|
||||
},
|
||||
};
|
||||
|
||||
export const WithMonthAndYearPickers = {
|
||||
render: Template,
|
||||
args: {
|
||||
...defaultProps,
|
||||
showMonthAndYearPickers: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const InternationalCalendars = {
|
||||
render: InternationalCalendarsTemplate,
|
||||
args: {
|
||||
|
||||
@ -457,6 +457,14 @@ export const Default = {
|
||||
},
|
||||
};
|
||||
|
||||
export const WithMonthAndYearPickers = {
|
||||
render: Template,
|
||||
args: {
|
||||
...defaultProps,
|
||||
showMonthAndYearPickers: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const VisibleMonths = {
|
||||
render: Template,
|
||||
args: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user