logo polydile dile-components


Web Component to create a input date form element with a datepicker, based on the lion-calendar component and dile-input element.

The @lion calendar has more options not implemented yet in this component. However, this component works good for the main use cases. We are accepting contributors ;)


npm i @dile/dile-datepicker


Import the component.

import '@dile/dile-datepicker/dile-datepicker.js';

Use the component.

<dile-datepicker name="date" label="date"></dile-datepicker>


This component extends dile-input and has all dile-input properties.

In addition, the datepicker has this extra properties:

CSS Custom Properties

For dile-datepicker:

Is possible to use the most of the custom properties documented on dile-input and dile-menu-overlay.

Custom propertyDescriptionDefault
--dile-datepicker-font-sizeFont size for the calendar0.9rem
--dile-datepicker-trigger-colorColor for the icon#39c
--dile-datepicker-trigger-sizeSize for the icon36px
--dile-datepicker-trigger-disabled-colorColor for the icon on disabled state#ccc
--dile-datepicker-trigger-margin-bottomSpace bottom for the icon0.2em
--dile-datepicker-widthcalendar widthDepends on the window size (responsive) from 280px to 350px

For dile-datepicker and dile-calendar component:

Custom propertyDescriptionDefault
--dile-calendar-day-background-colorCommon days backgroundrgba(90, 90, 90, 0.08)
--dile-calendar-day-text-colorCommon days text color#303030
--dile-calendar-day-border-radiusDays border radius2px
--dile-calendar-today-background-colorColor customization for todayrgba(90, 90, 90, 0.20)
--dile-calendar-out-day-text-colorColor customization for days that aren't in the current month#777
--dile-calendar-nav-buttons-colorColor for the links to previous/next month and year#303030
--dile-calendar-day-sizeSize of the calendar day squareDepends on the window size (responsive) from 28px to 36px
--dile-calendar-navigation-justify-contentYear and month navigation justify content on a flex containerspace-between
--dile-calendar-navigation-text-sizeYear and month navigation font size when window size is more than 400px1.1rem


The component is localized automaticaly to the lang declared on the HTML tag:

<html lang="en">

Supports many languages, for example:

<html lang="es">

Datepicker demos

Styled datepicker appears on bottom

<dile-datepicker name="datepicker2" id="datepicker2" class="styled" label="Event date" verticalAlign="bottom">Styled datepicker</dile-datepicker>

Monday as first day

<dile-datepicker firstDayOfWeek="1" name="datepicker2" id="datepicker2" label="Event date">Styled datepicker</dile-datepicker>

Disabled datepicker

<dile-datepicker label="Date" name="disabelddatepicker" disabled id="disabelddatepicker">Disabled datepicker</dile-datepicker>