PandaGo Components

Appearance

Return to top
On this page

TimePicker

Usage

We call time-picker to the interactive components in which the user will be able to select one time.

	Selected time:

Props

ComponentSkin skinIndicates which skin should be used for the component Default value: ComponentSkin.DESIGN_SYSTEM
pandads
number modelValueThe two-way binding of the component. It represents the number of seconds since midnight
(time: number) => boolean isDisabledThe function that returns true if the time is disabled. Default value: undefined
TimeViewTypes selectTypeThe type of the time view. Default value: TimeViewTypes.HOURS_SECONDS
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
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
string nowText Default value: Now
string okText Default value: OK

Type declarations

TimeViewTypes

ts
export enum TimeViewTypes {
	HOURS_MINUTES = 'minutes',
	HOURS_MINUTES_SECONDS = 'seconds',
}

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