PandaGo Components

Appearance

Return to top
On this page

DatePickerWindow

Usage

The Date Picker Window is a special component that will mostly be used in a popover from the Date Picker component, but it can be used standalone if required.

Oct.2024
MonTueWedThuFriSatSun
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
Oct.2024
MoTuWeThFrSaSu
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
	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

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',
}

ComponentSkin

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