PandaGo Components

Appearance

Return to top
On this page

DatePicker

Usage

We call date-picker to the interactive components in which the user will be able to select one, or a range, of dates. This can vary, either in days, months or years.

	Selected date:

Props

ComponentSkin skinIndicates which skin should be used for the component Default value: ComponentSkin.DESIGN_SYSTEM
pandads
Date modelValueTwo way binding of the component. It will work in a single selection date picker
boolean isRangeFlag to indicate if the date picker should be a range selection or not Default value: false
Date startTwo way binding of the start date of the range. It will work in a range selection date picker Default value: undefined
Date endTwo way binding of the end date of the range. It will work in a range selection date picker Default value: undefined
string[] monthsNamesThe names of the months to be used. If not provided, English names will be used Default value: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]
string todayTextThe text to be used for the today button. If not provided, English text will be used Default value: Today
string[] weekDaysNamesThe names of the week days to be used. If not provided, English names will be used Default value: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]
number firstDayOfWeekThe first day of the week. If not provided, Monday will be used. Goes from 0 to 6. Default value: 1
(item: Day | Month | number) => boolean isDisabledA function that will be called for each day to check if it should be disabled or not Default value: undefined
CalendarViewTypes selectTypeIndicates which view should be shown when the date picker is opened Default value: CalendarViewTypes.DAY
inputPlaceholderAdds a placeholder to the input. This will not be shown in the Panda skin
boolean hasErrorIndicates if there is an error with the input validation Default value: false
boolean loadingIndicates if the input should be in a loading state, but it does not work well in the Design System skin Default value: false
(date?: Date) => string showFormatA function that will be called to format the date to be shown in the input Default value: (date?: Date) => date ? DateHelper.formatDate(date, DateHelper.DateFormats.SHORT_NUMERIC) : ""
boolean isRequiredAdds an asterisk to the label to indicate that the input is required Default value: false
boolean readonlyDisables the input to not allow user interaction Default value: false

TIP

In CalendarviewTypes.DAY view, the date picker will show the days of the month.

In CalendarviewTypes.MONTH view, the date picker will show the months of the year.

In CalendarviewTypes.YEAR view, the date picker will show the years of the decade.

TIP

In single date selection mode, the selected time will be 00:00:00 UTC.

In range mode, the start time will be 00:00:00 UTC and the end time will be 00:00:00 UTC of the selected date.

Type declarations

Day

ts
export interface Day {
	number: number;
	weekDay: number;
	month: number;
	year: number;
	isDisabled?: boolean;
}

Month

ts
export interface Month {
	number: number;
	year: number;
}

CalendarViewTypes

ts
export enum CalendarViewTypes {
	DAY = 'day',
	MONTH = 'month',
	YEAR = 'year',
}

DateFormats

ts
enum DateFormats {
	HOURS = 'hh:MM:ss',
	HOURS_WITHOUT_SECONDS = 'hh:MM',
	SHORT_NUMERIC = 'dd-mm-yyyy',
	LONG_NUMERIC = 'dd-mm-yyyy hh:MM:ss',
	LONG_NUMERIC_WITHOUT_SECONDS = 'dd-mm-yyyy hh:MM',
	SHORT = 'd mmm, yyyy',
	LONG = 'd mmm, yyyy hh:MM:ss',
	LONG_WITHOUT_SECONDS = 'd mmm, yyyy hh:MM',
	MONTH_YEAR = 'mmm yyyy',
	WEEKDAY = 'dddd, d mmm, yyyy',
	WEEKDAY_LONG = 'dddd, d mmmm, yyyy hh:MM:ss',
	WEEKDAY_LONG_WITHOUT_SECONDS = 'dddd, d mmmm, yyyy hh:MM',
	API = 'yyyy-mm-dd',
}

ComponentSkin

ts
export enum ComponentSkin {
	PANDA = 'panda',
	DESIGN_SYSTEM = 'ds',
}