vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #1836 - For Calendar

pull/1846/head
mertsincan 2021-12-01 15:29:15 +03:00
parent 1532b467fa
commit b8ba7e0008
1 changed files with 322 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

384
src/components/calendar/Calendar.d.ts vendored
View File

@ -1,75 +1,335 @@
import { VNode } from 'vue'; import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
interface CalendarProps { type CalendarValueType = Date | Date[] | undefined;
modelValue?: Date | Date[];
selectionMode?: string; type CalendarSelectionModeType = 'single' | 'multiple' | 'range';
dateFormat?: string;
inline?: boolean; type CalendarViewType = 'date' | 'month' | 'year';
showOtherMonths?: boolean;
selectOtherMonths?: boolean; type CalendarHourFormatType = '12' | '24';
showIcon?: boolean;
icon?: string; type CalendarAppendToType = 'body' | 'self' | string | undefined;
numberOfMonths?: number;
responsiveOptions?: any[]; export interface CalendarResponsiveOptions {
view?: string; /**
touchUI?: boolean; * Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...}
monthNavigator?: boolean; */
yearNavigator?: boolean; breakpoint: string;
yearRange?: string; /**
panelClass?: string; * The number of visible months on breakpoint.
minDate?: Date; */
maxDate?: Date; numMonths: number;
disabledDates?: Date[]; }
disabledDays?: number[];
maxDateCount?: number; export interface CalendarMonthChangeEvent {
showOnFocus?: boolean; /**
autoZIndex?: boolean; * New month.
baseZIndex?: number; */
showButtonBar?: boolean; month: number;
shortYearCutoff?: string; /**
showTime?: boolean; * New year.
timeOnly?: boolean; */
hourFormat?: string; year: number;
stepHour?: number; }
stepMinute?: number;
stepSecond?: number; export interface CalendarYearChangeEvent {
showSeconds?: boolean; /**
hideOnDateTimeSelect?: boolean; * New month.
timeSeparator?: string; */
showWeek?: boolean; month: number;
manualInput?: boolean; /**
appendTo?: string; * New year.
*/
year: number;
}
export interface CalendarProps {
/**
* Value of the component.
*/
modelValue?: CalendarValueType;
/**
* Defines the quantity of the selection, valid values are "single", "multiple" and "range".
* @see CalendarSelectionModeType
* Default value is 'single'.
*/
selectionMode?: CalendarSelectionModeType;
/**
* Format of the date. Defaults to PrimeVue Locale configuration.
*/
dateFormat?: string | undefined;
/**
* When enabled, displays the calendar as inline instead of an overlay.
*/
inline?: boolean | undefined;
/**
* Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
* Default value is true.
*/
showOtherMonths?: boolean | undefined;
/**
* Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
*/
selectOtherMonths?: boolean | undefined;
/**
* When enabled, displays a button with icon next to input.
*/
showIcon?: boolean | undefined;
/**
* Icon of the calendar button.
* Default value is 'pi pi-calendar'.
*/
icon?: string | undefined;
/**
* Number of months to display.
* Default value is 1.
*/
numberOfMonths?: number | undefined;
/**
* An array of options for responsive design.
* @see CalendarResponsiveOptions
*/
responsiveOptions?: CalendarResponsiveOptions[];
/**
* Type of view to display, valid values are "date", "month" and "year".
* @see CalendarViewType
* Default value is 'date'.
*/
view?: CalendarViewType;
/**
* When enabled, calendar overlay is displayed as optimized for touch devices.
*/
touchUI?: boolean | undefined;
/**
* Whether the month should be rendered as a dropdown instead of text.
*
* @deprecated since version 3.9.0, Navigator is always on.
*/
monthNavigator?: boolean | undefined;
/**
* Whether the year should be rendered as a dropdown instead of text.
*
* @deprecated since version 3.9.0, Navigator is always on.
*/
yearNavigator?: boolean | undefined;
/**
* The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).
*
* @deprecated since version 3.9.0, Years are based on decades by default.
*/
yearRange?: string | undefined;
/**
* Style class of the datetimepicker panel.
*/
panelClass?: string | undefined;
/**
* The minimum selectable date.
*/
minDate?: Date | undefined;
/**
* The maximum selectable date.
*/
maxDate?: Date | undefined;
/**
* Array with dates to disable.
*/
disabledDates?: Date[] | undefined;
/**
* Array with disabled weekday numbers.
*/
disabledDays?: number[] | undefined;
/**
* Maximum number of selectable dates in multiple mode.
*/
maxDateCount?: number | undefined;
/**
* When disabled, datepicker will not be visible with input focus.
* Default value is true.
*/
showOnFocus?: boolean | undefined;
/**
* Whether to automatically manage layering.
* Default value is true.
*/
autoZIndex?: boolean | undefined;
/**
* Base zIndex value to use in layering.
* Default value is 0.
*/
baseZIndex?: number | undefined;
/**
* Whether to display today and clear buttons at the footer.
*/
showButtonBar?: boolean | undefined;
/**
* The cutoff year for determining the century for a date.
* Default value is +10.
*/
shortYearCutoff?: string | undefined;
/**
* Whether to display timepicker.
*/
showTime?: boolean | undefined;
/**
* Whether to display timepicker only.
*/
timeOnly?: boolean | undefined;
/**
* Specifies 12 or 24 hour format.
*/
hourFormat?: CalendarHourFormatType;
/**
* Hours to change per step.
* Default value is 1.
*/
stepHour?: number | undefined;
/**
* Minutes to change per step.
* Default value is 1.
*/
stepMinute?: number | undefined;
/**
* Seconds to change per step.
* Default value is 1.
*/
stepSecond?: number | undefined;
/**
* Whether to show the seconds in time picker.
*/
showSeconds?: boolean | undefined;
/**
* Whether to hide the overlay on date selection when showTime is enabled.
*/
hideOnDateTimeSelect?: boolean | undefined;
/**
* Separator of time selector.
* Default value is ':'.
*/
timeSeparator?: string | undefined;
/**
* When enabled, calendar will show week numbers.
*/
showWeek?: boolean | undefined;
/**
* Wheter to allow prevents entering the date manually via typing.
* Default value is true.
*/
manualInput?: boolean | undefined;
/**
* A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.
* Default value is 'body'.
*/
appendTo?: CalendarAppendToType;
/**
* Inline style of the input field.
*/
inputStyle?: any; inputStyle?: any;
inputClass?: string; /**
* Style class of the input field.
*/
inputClass?: string | undefined;
/**
* Inline style of the component.
*/
style?: any; style?: any;
class?: string; /**
keepInvalid?: boolean; * Style class of the component.
*/
class?: string | undefined;
/**
* Keep invalid value when input blur.
*/
keepInvalid?: boolean | undefined;
} }
interface CalendarDateSlotInterface { export interface CalendarSlots {
date: any; /**
* Custom header template of panel.
*/
header: () => VNode[];
/**
* Custom footer template of panel.
*/
footer: () => VNode[];
/**
* Custom date template.
* @param {Object} scope - date slot's params.
*/
date: (scope: {
/**
* Value of the component.
*/
date: CalendarValueType;
}) => VNode[];
/**
* Custom decade template.
* @param {CalendarDecadeSlot} scope - decade slot's params.
*/
decade: (scope: {
/**
* An array containing the start and and year of a decade to display at header of the year picker.
*/
years: string[] | undefined;
}) => VNode[];
} }
interface CalendarDecadeSlotInterface { export declare type CalendarEmits = {
years: any; /**
* Emitted when the value changes.
* @param {CalendarValueType} value - New value.
*/
'update:modelValue': (value: CalendarValueType) => void;
/**
* Callback to invoke when a date is selected.
* @param {Date} value - Selected value.
*/
'date-select': (value: Date) => void;
/**
* Callback to invoke when datepicker panel is shown.
*/
'show': () => void;
/**
* Callback to invoke when datepicker panel is hidden.
*/
'hide': () => void;
/**
* Callback to invoke when today button is clicked.
* @param {Date} date - Today as a date instance.
*/
'today-click': (date: Date) => void;
/**
* Callback to invoke when clear button is clicked.
* @param {Event} event - Browser event.
*/
'clear-click': (event: Event) => void;
/**
* Callback to invoke when a month is changed using the navigators.
* @param {CalendarMonthChangeEvent} event - Custom month change event.
*/
'month-change': (event: CalendarMonthChangeEvent) => void;
/**
* Callback to invoke when a year is changed using the navigators.
* @param {CalendarYearChangeEvent} event - Custom year change event.
*/
'year-change': (event: CalendarYearChangeEvent) => void;
} }
declare class Calendar { declare class Calendar extends ClassComponent<CalendarProps, CalendarSlots, CalendarEmits> { }
$props: CalendarProps;
$emit(eventName: 'update:modelValue', value: Date | Date[]): this; declare module '@vue/runtime-core' {
$emit(eventName: 'show'): this; interface GlobalComponents {
$emit(eventName: 'hide'): this; Calendar: GlobalComponentConstructor<Calendar>
$emit(eventName: 'month-change', e: { month: number, year: number }): this; }
$emit(eventName: 'year-change', e: { month: number, year: number }): this;
$emit(eventName: 'date-select', value: Date): this;
$emit(eventName: 'today-click', value: Date): this;
$emit(eventName: 'clear-click', event: Event): this;
$slots: {
header: VNode[];
date: CalendarDateSlotInterface;
footer: VNode[];
decade: CalendarDecadeSlotInterface;
};
} }
/**
*
* Calendar is an input component to select a date.
*
* Demos:
*
* - [Calendar](https://www.primefaces.org/primevue/showcase/#/calendar)
*
*/
export default Calendar; export default Calendar;