Calendar ⚠️ Experimental

The Calendar component can be used imported from:

Playground

Parameters

Events

This component has events. Check the documentation about how to use the events.

Name	Payload	Description
ngModelChange	string	Fires when the selected date changes.
restarted	void	Emitted on value reset

Parameters use

Check the documentation about how to use the parameters.

ngModel

Attention!

If you hardcode this value, it will not be reactive and the selection won't change. Use a variable instead and, ideally, a closed loop.

By defining the model prop, you can set the initial value of the input

first-weekday

By defining the first-weekday prop, you can set the first day of the week. Possible values are sunday and monday. If not defined, the default value is monday.

calendar-type

By defining the calendar-type prop, you can set the type of the calendar.

range

we can set a min and max values using range. Take into consideration that that both range values are included.

min

Instead of using range we can use just min. This overrides the range value.

max

Instead of using range we can use just max. This overrides the range value.

locale

Attention!

The localization format of the input should come from the format settings of the client's operation system or browser. Check the localization docs.

By defining the locale prop, you can set the locale of the calendar. If not defined, the default will be the browser's locale.

Flags

disabled

The attribute disabled will block the interaction with the component.

wide

The attribute wide expands the calendar. The width will be controlled by the parent.

today-nav

This flag ables a button in the footer to navigate to the current date (today):

selected-nav

This flag ables a button in the footer to navigate to the currently selected date. This will be disabled if no value is selected:

It can be combined with today-nav:

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

CodeSandbox example

Sorry, not available yet ☹️