behavior: calendar

behavior: calendar

calendar is date input element allowing to select particular date.


that have this behavior applied by default:

  • <input type="calendar" /> – inline date input element.


The calendar has four different view modes:

  • decades view – table of 10-year decades;
  • decade view – table of 10 years in decade;
  • months view – table of 12 months in a year;
  • days view – table of days in a month.

Each mode uses <table> to render content of the view. Use DOM inspector to discover DOM structure of each view if you will need to style content of the calandar in some specific manner.


that this behavior knows about:

  • value="YYYY-MM-DD" – initial date, string in ISO 8601 format.


Aside of standard set of events (mouse, keyboard, focus) behavior: calendar generates:

  • SELECT_STATE_CHANGED event – view has changed, e.g. month changed. Posted (asynchronous) event.
  • SELECT_SELECTION_CHANGED event – date changed. Posted (asynchronous) event.


Date value or undefined, reflects current selection.


N/A – this input element has no specific methods.