import { PropType } from 'vue'; import type { DisabledDate } from '../calendar/types'; declare const CDateRangePicker: import("vue").DefineComponent boolean; }; /** * Size the cancel button small or large. * * @values 'sm', 'lg' */ cancelButtonSize: { type: StringConstructor; default: string; validator: (value: string) => boolean; }; /** * Set the cancel button variant to an outlined button or a ghost button. * * @values 'ghost', 'outline' */ cancelButtonVariant: { type: StringConstructor; default: string; validator: (value: string) => boolean; }; /** * Toggle visibility of the cleaner button. */ cleaner: { type: BooleanConstructor; default: boolean; }; /** * If true the dropdown will be immediately closed after submitting the full date. * * @since 4.7.0 */ closeOnSelect: { type: BooleanConstructor; default: boolean; }; /** * Toggle visibility or set the content of confirm button. */ confirmButton: { type: (StringConstructor | BooleanConstructor)[]; default: string; }; /** * Sets the color context of the confirm button to one of CoreUI’s themed colors. * * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' */ confirmButtonColor: { default: string; type: StringConstructor; validator: (value: string) => boolean; }; /** * Size the confirm button small or large. * * @values 'sm', 'lg' */ confirmButtonSize: { type: StringConstructor; default: string; validator: (value: string) => boolean; }; /** * Set the confirm button variant to an outlined button or a ghost button. * * @values 'ghost', 'outline' */ confirmButtonVariant: { type: StringConstructor; validator: (value: string) => boolean; }; /** * Set the format of day name. * * @default 'numeric' * @since 4.6.0 */ dayFormat: { type: (StringConstructor | FunctionConstructor)[]; default: string; required: false; validator: (value: string) => boolean; }; /** * Sets the format for month names. * * @default 'short' * @since 5.18.0 */ monthFormat: { type: PropType<"long" | "narrow" | "short" | "numeric" | "2-digit">; default: string; validator: (value: string) => boolean; }; /** * Toggle the disabled state for the component. */ disabled: BooleanConstructor; /** * Specify the list of dates that cannot be selected. */ disabledDates: PropType; /** * Initial selected to date (range). */ endDate: (StringConstructor | DateConstructor)[]; /** * Provide valuable, actionable feedback. * * @since 4.6.0 */ feedback: StringConstructor; /** * Provide valuable, actionable feedback. * * @since 4.6.0 */ feedbackInvalid: StringConstructor; /** * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * * @since 4.6.0 */ feedbackValid: StringConstructor; /** * Sets the day of start week. * - 0 - Sunday, * - 1 - Monday, * - 2 - Tuesday, * - 3 - Wednesday, * - 4 - Thursday, * - 5 - Friday, * - 6 - Saturday, */ firstDayOfWeek: { type: NumberConstructor; default: number; }; /** * Set date format. * We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns. */ format: StringConstructor; /** * Toggle visibility of footer element or set the content of footer. */ footer: BooleanConstructor; /** * The id attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the IDs unique. Alternatively, you can use an array of two strings for start and end dates separately. * * **[Deprecated since v5.3.0]** If the property is a type of string, the name attributes for input elements are generated based on this property until you define name prop ex.: * - \{id\}-start-date * - \{id\}-end-date */ id: { type: PropType; }; /** * Toggle visibility or set the content of the input indicator. */ indicator: { type: BooleanConstructor; default: boolean; }; /** * Custom function to format the selected date into a string according to a custom format. * * @since 5.0.0 */ inputDateFormat: FunctionConstructor; /** * Custom function to parse the input value into a valid Date object. * * @since 5.0.0 */ inputDateParse: FunctionConstructor; /** * Defines the delay (in milliseconds) for the input field's onChange event. * * @since 5.0.0 */ inputOnChangeDelay: { type: NumberConstructor; default: number; }; /** * Toggle the readonly state for the component. */ inputReadOnly: BooleanConstructor; /** * Set component validation state to invalid. * * @since 4.6.0 */ invalid: { type: BooleanConstructor; default: undefined; }; /** * Add a caption for a component. * * @since 4.6.0 */ label: StringConstructor; /** * Sets the default locale for components. If not set, it is inherited from the navigator.language. */ locale: { type: StringConstructor; default: string; }; /** * Max selectable date. */ maxDate: (StringConstructor | DateConstructor)[]; /** * Min selectable date. */ minDate: (StringConstructor | DateConstructor)[]; /** * The name attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the names unique. Alternatively, you can use an array of two strings for start and end dates separately. * * Example for single string: 'date-input' * Result: 'date-input-start-date', 'date-input-end-date' * * Example for array: ['start-date-input', 'end-date-input'] * Result: 'start-date-input', 'end-date-input' * * @since 5.3.0 */ name: { type: PropType; }; /** * Show arrows navigation. */ navigation: { type: BooleanConstructor; default: boolean; }; /** * Reorder year-month navigation, and render year first. * * @since 4.6.0 */ navYearFirst: BooleanConstructor; /** * Specifies a short hint that is visible in the input. */ placeholder: { type: PropType; default: () => string[]; }; /** * Enable live preview of dates in input fields when hovering over calendar cells. * * @since 5.14.0 */ previewDateOnHover: { type: BooleanConstructor; default: boolean; }; /** * @ignore */ range: { type: BooleanConstructor; default: boolean; }; /** * Predefined date ranges the user can select from. */ ranges: ObjectConstructor; /** * When present, it specifies that must be filled out before submitting the form. * * @since 4.9.0 */ required: BooleanConstructor; /** * Toggle select mode between start and end date. */ selectEndDate: BooleanConstructor; /** * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true. * * @since 4.9.0 */ selectAdjacementDays: BooleanConstructor; /** * Specify the type of date selection as day, week, month, quarter, or year. * * @since 5.0.0 */ selectionType: { type: PropType<"day" | "week" | "month" | "quarter" | "year">; default: string; validator: (value: string) => boolean; }; /** * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. * * @since 4.9.0 */ showAdjacementDays: { type: BooleanConstructor; default: boolean; }; /** * Set whether to display week numbers in the calendar. * * @since 5.0.0 */ showWeekNumber: BooleanConstructor; /** * Default icon or character character that separates two dates. */ separator: { type: BooleanConstructor; default: boolean; }; /** * Size the component small or large. * * @values 'sm', 'lg' */ size: { type: StringConstructor; required: false; validator: (value: string) => boolean; }; /** * Initial selected date. */ startDate: (StringConstructor | DateConstructor)[]; /** * Generates dropdown menu using Teleport. * * @since 5.8.0 */ teleport: { type: BooleanConstructor[]; default: boolean; }; /** * Add helper text to the component. * * @since 4.6.0 */ text: StringConstructor; /** * Provide an additional time selection by adding select boxes to choose times. */ timepicker: BooleanConstructor; /** * Toggle visibility or set the content of today button. */ todayButton: { type: (StringConstructor | BooleanConstructor)[]; default: string; }; /** * Sets the color context of the today button to one of CoreUI’s themed colors. * * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' */ todayButtonColor: { default: string; type: StringConstructor; validator: (value: string) => boolean; }; /** * Size the today button small or large. * * @values 'sm', 'lg' */ todayButtonSize: { type: StringConstructor; default: string; validator: (value: string) => boolean; }; /** * Set the today button variant to an outlined button or a ghost button. * * @values 'ghost', 'outline' */ todayButtonVariant: { type: StringConstructor; validator: (value: string) => boolean; }; /** * Display validation feedback in a styled tooltip. * * @since 4.6.0 */ tooltipFeedback: BooleanConstructor; /** * Set component validation state to valid. * * @since 4.6.0 */ valid: { type: BooleanConstructor; default: undefined; }; /** * Toggle the visibility of the component. */ visible: BooleanConstructor; /** * Set length or format of day name. * * @type number | 'long' | 'narrow' | 'short' */ weekdayFormat: { type: (NumberConstructor | StringConstructor | FunctionConstructor)[]; default: number; validator: (value: string | number) => boolean; }; /** * Label displayed over week numbers in the calendar. * * @since 5.0.0 */ weekNumbersLabel: StringConstructor; /** * Sets the format for years. * * @default 'numeric' * @since 5.18.0 */ yearFormat: { type: PropType<"numeric" | "2-digit">; default: string; validator: (value: string) => boolean; }; }>, () => import("vue").VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show" | "start-date-change" | "end-date-change" | "update:start-date" | "update:end-date")[], "hide" | "show" | "start-date-change" | "end-date-change" | "update:start-date" | "update:end-date", import("vue").PublicProps, Readonly boolean; }; /** * Size the cancel button small or large. * * @values 'sm', 'lg' */ cancelButtonSize: { type: StringConstructor; default: string; validator: (value: string) => boolean; }; /** * Set the cancel button variant to an outlined button or a ghost button. * * @values 'ghost', 'outline' */ cancelButtonVariant: { type: StringConstructor; default: string; validator: (value: string) => boolean; }; /** * Toggle visibility of the cleaner button. */ cleaner: { type: BooleanConstructor; default: boolean; }; /** * If true the dropdown will be immediately closed after submitting the full date. * * @since 4.7.0 */ closeOnSelect: { type: BooleanConstructor; default: boolean; }; /** * Toggle visibility or set the content of confirm button. */ confirmButton: { type: (StringConstructor | BooleanConstructor)[]; default: string; }; /** * Sets the color context of the confirm button to one of CoreUI’s themed colors. * * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' */ confirmButtonColor: { default: string; type: StringConstructor; validator: (value: string) => boolean; }; /** * Size the confirm button small or large. * * @values 'sm', 'lg' */ confirmButtonSize: { type: StringConstructor; default: string; validator: (value: string) => boolean; }; /** * Set the confirm button variant to an outlined button or a ghost button. * * @values 'ghost', 'outline' */ confirmButtonVariant: { type: StringConstructor; validator: (value: string) => boolean; }; /** * Set the format of day name. * * @default 'numeric' * @since 4.6.0 */ dayFormat: { type: (StringConstructor | FunctionConstructor)[]; default: string; required: false; validator: (value: string) => boolean; }; /** * Sets the format for month names. * * @default 'short' * @since 5.18.0 */ monthFormat: { type: PropType<"long" | "narrow" | "short" | "numeric" | "2-digit">; default: string; validator: (value: string) => boolean; }; /** * Toggle the disabled state for the component. */ disabled: BooleanConstructor; /** * Specify the list of dates that cannot be selected. */ disabledDates: PropType; /** * Initial selected to date (range). */ endDate: (StringConstructor | DateConstructor)[]; /** * Provide valuable, actionable feedback. * * @since 4.6.0 */ feedback: StringConstructor; /** * Provide valuable, actionable feedback. * * @since 4.6.0 */ feedbackInvalid: StringConstructor; /** * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. * * @since 4.6.0 */ feedbackValid: StringConstructor; /** * Sets the day of start week. * - 0 - Sunday, * - 1 - Monday, * - 2 - Tuesday, * - 3 - Wednesday, * - 4 - Thursday, * - 5 - Friday, * - 6 - Saturday, */ firstDayOfWeek: { type: NumberConstructor; default: number; }; /** * Set date format. * We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns. */ format: StringConstructor; /** * Toggle visibility of footer element or set the content of footer. */ footer: BooleanConstructor; /** * The id attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the IDs unique. Alternatively, you can use an array of two strings for start and end dates separately. * * **[Deprecated since v5.3.0]** If the property is a type of string, the name attributes for input elements are generated based on this property until you define name prop ex.: * - \{id\}-start-date * - \{id\}-end-date */ id: { type: PropType; }; /** * Toggle visibility or set the content of the input indicator. */ indicator: { type: BooleanConstructor; default: boolean; }; /** * Custom function to format the selected date into a string according to a custom format. * * @since 5.0.0 */ inputDateFormat: FunctionConstructor; /** * Custom function to parse the input value into a valid Date object. * * @since 5.0.0 */ inputDateParse: FunctionConstructor; /** * Defines the delay (in milliseconds) for the input field's onChange event. * * @since 5.0.0 */ inputOnChangeDelay: { type: NumberConstructor; default: number; }; /** * Toggle the readonly state for the component. */ inputReadOnly: BooleanConstructor; /** * Set component validation state to invalid. * * @since 4.6.0 */ invalid: { type: BooleanConstructor; default: undefined; }; /** * Add a caption for a component. * * @since 4.6.0 */ label: StringConstructor; /** * Sets the default locale for components. If not set, it is inherited from the navigator.language. */ locale: { type: StringConstructor; default: string; }; /** * Max selectable date. */ maxDate: (StringConstructor | DateConstructor)[]; /** * Min selectable date. */ minDate: (StringConstructor | DateConstructor)[]; /** * The name attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the names unique. Alternatively, you can use an array of two strings for start and end dates separately. * * Example for single string: 'date-input' * Result: 'date-input-start-date', 'date-input-end-date' * * Example for array: ['start-date-input', 'end-date-input'] * Result: 'start-date-input', 'end-date-input' * * @since 5.3.0 */ name: { type: PropType; }; /** * Show arrows navigation. */ navigation: { type: BooleanConstructor; default: boolean; }; /** * Reorder year-month navigation, and render year first. * * @since 4.6.0 */ navYearFirst: BooleanConstructor; /** * Specifies a short hint that is visible in the input. */ placeholder: { type: PropType; default: () => string[]; }; /** * Enable live preview of dates in input fields when hovering over calendar cells. * * @since 5.14.0 */ previewDateOnHover: { type: BooleanConstructor; default: boolean; }; /** * @ignore */ range: { type: BooleanConstructor; default: boolean; }; /** * Predefined date ranges the user can select from. */ ranges: ObjectConstructor; /** * When present, it specifies that must be filled out before submitting the form. * * @since 4.9.0 */ required: BooleanConstructor; /** * Toggle select mode between start and end date. */ selectEndDate: BooleanConstructor; /** * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true. * * @since 4.9.0 */ selectAdjacementDays: BooleanConstructor; /** * Specify the type of date selection as day, week, month, quarter, or year. * * @since 5.0.0 */ selectionType: { type: PropType<"day" | "week" | "month" | "quarter" | "year">; default: string; validator: (value: string) => boolean; }; /** * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. * * @since 4.9.0 */ showAdjacementDays: { type: BooleanConstructor; default: boolean; }; /** * Set whether to display week numbers in the calendar. * * @since 5.0.0 */ showWeekNumber: BooleanConstructor; /** * Default icon or character character that separates two dates. */ separator: { type: BooleanConstructor; default: boolean; }; /** * Size the component small or large. * * @values 'sm', 'lg' */ size: { type: StringConstructor; required: false; validator: (value: string) => boolean; }; /** * Initial selected date. */ startDate: (StringConstructor | DateConstructor)[]; /** * Generates dropdown menu using Teleport. * * @since 5.8.0 */ teleport: { type: BooleanConstructor[]; default: boolean; }; /** * Add helper text to the component. * * @since 4.6.0 */ text: StringConstructor; /** * Provide an additional time selection by adding select boxes to choose times. */ timepicker: BooleanConstructor; /** * Toggle visibility or set the content of today button. */ todayButton: { type: (StringConstructor | BooleanConstructor)[]; default: string; }; /** * Sets the color context of the today button to one of CoreUI’s themed colors. * * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' */ todayButtonColor: { default: string; type: StringConstructor; validator: (value: string) => boolean; }; /** * Size the today button small or large. * * @values 'sm', 'lg' */ todayButtonSize: { type: StringConstructor; default: string; validator: (value: string) => boolean; }; /** * Set the today button variant to an outlined button or a ghost button. * * @values 'ghost', 'outline' */ todayButtonVariant: { type: StringConstructor; validator: (value: string) => boolean; }; /** * Display validation feedback in a styled tooltip. * * @since 4.6.0 */ tooltipFeedback: BooleanConstructor; /** * Set component validation state to valid. * * @since 4.6.0 */ valid: { type: BooleanConstructor; default: undefined; }; /** * Toggle the visibility of the component. */ visible: BooleanConstructor; /** * Set length or format of day name. * * @type number | 'long' | 'narrow' | 'short' */ weekdayFormat: { type: (NumberConstructor | StringConstructor | FunctionConstructor)[]; default: number; validator: (value: string | number) => boolean; }; /** * Label displayed over week numbers in the calendar. * * @since 5.0.0 */ weekNumbersLabel: StringConstructor; /** * Sets the format for years. * * @default 'numeric' * @since 5.18.0 */ yearFormat: { type: PropType<"numeric" | "2-digit">; default: string; validator: (value: string) => boolean; }; }>> & Readonly<{ onHide?: ((...args: any[]) => any) | undefined; onShow?: ((...args: any[]) => any) | undefined; "onStart-date-change"?: ((...args: any[]) => any) | undefined; "onEnd-date-change"?: ((...args: any[]) => any) | undefined; "onUpdate:start-date"?: ((...args: any[]) => any) | undefined; "onUpdate:end-date"?: ((...args: any[]) => any) | undefined; }>, { footer: boolean; invalid: boolean; visible: boolean; disabled: boolean; teleport: boolean; valid: boolean; tooltipFeedback: boolean; required: boolean; indicator: boolean; placeholder: string | [string, string]; cleaner: boolean; navYearFirst: boolean; range: boolean; selectEndDate: boolean; selectAdjacementDays: boolean; showWeekNumber: boolean; ariaNavNextMonthLabel: string; ariaNavNextYearLabel: string; ariaNavPrevMonthLabel: string; ariaNavPrevYearLabel: string; calendars: number; dayFormat: string | Function; firstDayOfWeek: number; locale: string; monthFormat: "long" | "narrow" | "short" | "numeric" | "2-digit"; navigation: boolean; selectionType: "day" | "week" | "month" | "quarter" | "year"; showAdjacementDays: boolean; weekdayFormat: string | number | Function; yearFormat: "numeric" | "2-digit"; separator: boolean; inputReadOnly: boolean; cancelButton: string | boolean; cancelButtonColor: string; cancelButtonSize: string; cancelButtonVariant: string; confirmButton: string | boolean; confirmButtonColor: string; confirmButtonSize: string; inputOnChangeDelay: number; timepicker: boolean; closeOnSelect: boolean; previewDateOnHover: boolean; todayButton: string | boolean; todayButtonColor: string; todayButtonSize: string; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; export { CDateRangePicker };