logo polydile dile-components

dile-datepicker

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 ;)

Installation

npm i @dile/utils

Usage

Import the component.

import '@dile/utils/components/datepicker/datepicker.js';

Use the component.

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

Properties

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 property Description Default
--dile-datepicker-font-size Font size for the calendar 0.9rem
--dile-datepicker-trigger-color Color for the icon #39c
--dile-datepicker-trigger-size Size for the icon 36px
--dile-datepicker-trigger-disabled-color Color for the icon on disabled state #ccc
--dile-datepicker-trigger-margin-bottom Space bottom for the icon 0.2em
--dile-datepicker-width calendar width Depends on the window size (responsive) from 280px to 350px

For dile-datepicker and dile-calendar component:

Custom property Description Default
--dile-calendar-day-background-color Common days background rgba(90, 90, 90, 0.08)
--dile-calendar-day-text-color Common days text color #303030
--dile-calendar-day-border-radius Days border radius 2px
--dile-calendar-today-background-color Color customization for today rgba(90, 90, 90, 0.20)
--dile-calendar-out-day-text-color Color customization for days that aren't in the current month #777
--dile-calendar-nav-buttons-color Color for the links to previous/next month and year #303030
--dile-calendar-day-size Size of the calendar day square Depends on the window size (responsive) from 28px to 36px
--dile-calendar-navigation-justify-content Year and month navigation justify content on a flex container space-between
--dile-calendar-navigation-text-size Year and month navigation font size when window size is more than 400px 1.1rem

Localization

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

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

Monday as first day

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

Disabled datepicker

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