Back to guidelines

Web ComponentThe latest version of this package is: 0.3.4, Opens in new window

Webcomponent for Datepicker Component

This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-wc/datepicker@0.3.4

Table of Contents

Usage

Required markup

<div class="if input-wrapper"
  <input id="datepicker-01" name="datepicker-01" type="text" class="if input-field date" />
  <label for="datepicker-01" class="if label">Choose date</label>
  <div class="if input-error">Please enter a valid date</div>
  <ids-datepicker></ids-datepicker>
</div>
<script src="…datepicker-webcomponent.iife.js"></script>

Persist on select

Use data-persist-on-select to not close the datepicker dialog when date is selected

Please enter a valid date
<form class="if" autocomplete="off">
  <div class="if input-wrapper">
    <input type="text" class="if input-field date is-optional" />
    <label class="if input-label">Choose date</label>
    <div class="if input-error">Please enter a valid date</div>
    <ids-datepicker data-persist-on-select> </ids-datepicker>
  </div>
</form>

Ignore on focus

Use data-ignore-on-focus to open the datepicker from an external initiator.

Please enter a valid date
<form class="if" autocomplete="off">
  <div class="if input-wrapper">
    <input type="text" class="if input-field date is-optional" />
    <label class="if input-label">Choose date</label>
    <div class="if input-error">Please enter a valid date</div>
    <ids-datepicker data-ignore-on-focus> </ids-datepicker>
  </div>
</form>

Open on init

Use data-open to open datepicker on init.

Please enter a valid date
<form class="if" autocomplete="off">
  <div class="if input-wrapper">
    <input type="text" class="if input-field date" />
    <label class="if input-label">Choose date</label>
    <div class="if input-error">Please enter a valid date</div>
    <ids-datepicker data-open> </ids-datepicker>
  </div>
</form>

Disable weekend selection

Use data-disable-weekend to disable weekend selection.

Please enter a valid date
<form class="if" autocomplete="off">
  <div class="if input-wrapper">
    <input type="text" class="if input-field date" />
    <label class="if input-label">Choose date</label>
    <div class="if input-error">Please enter a valid date</div>
    <ids-datepicker data-disable-weekend> </ids-datepicker>
  </div>
</form>

Custom locale

Use data-locale to enforce the locale to be used.

Please enter a valid date
<form class="if" autocomplete="off">
  <div class="if input-wrapper">
    <input type="text" class="if input-field date" />
    <label class="if input-label">Choose date</label>
    <div class="if input-error">Please enter a valid date</div>
    <ids-datepicker data-locale="lv"> </ids-datepicker>
  </div>
</form>

Min and max date

Use data-min-date and data-max-date to let the user only select between those dates.

Please enter a valid date
<form class="if" autocomplete="off">
  <div class="if input-wrapper">
    <input type="text" class="if input-field date" />
    <label class="if input-label">Choose date</label>
    <div class="if input-error">Please enter a valid date</div>
    <ids-datepicker data-min-date="11.5.2021" data-max-date="18.6.2021">
    </ids-datepicker>
  </div>
</form>

Set init date to a different date

data-init-date can be any valid date string or a date format for the current locale.

Please enter a valid date
<form class="if" autocomplete="off">
  <div class="if input-wrapper">
    <input type="text" class="if input-field date" />
    <label class="if input-label">Choose date</label>
    <div class="if input-error">Please enter a valid date</div>
    <ids-datepicker data-init-date="1995-12-17T03:24:00"> </ids-datepicker>
  </div>
</form>

Set init date to today

Please enter a valid date
<form class="if" autocomplete="off">
  <div class="if input-wrapper">
    <input type="text" class="if input-field date" />
    <label class="if input-label">Choose date</label>
    <div class="if input-error">Please enter a valid date</div>
    <ids-datepicker data-init-date="current"> </ids-datepicker>
  </div>
</form>

Pattern validation

Please enter a valid date
<form class="if" autocomplete="off">
  <div class="if input-wrapper">
    <input type="text" class="if input-field date" />
    <label class="if input-label">Choose date</label>
    <div class="if input-error">Please enter a valid date</div>
    <ids-datepicker data-use-pattern> </ids-datepicker>
  </div>
</form>

Mark special days

You can also send in an object to mark special days, like holidays.

In this example, we are using Norwegian holidays (public/bank).

Given this markup, notice the id-attribute:

<form class="if" autocomplete="off">
<div class="if input-wrapper">
    <input type="text" class="if input-field date is-optional" />
    <label class="if input-label">Choose date</label>
    <div class="if input-error">Please enter a valid date</div>
    <ids-datepicker id="marked-special-day">
  </ids-datepicker>
</form>

And this object in given format:

{"1617400800000": {
    "date": "2021-04-03 00:00:00",
    "name": "Påskeaften",
  },}

And this code:

const _marked_special_day_datepicker_wc =
  document.getElementById('marked-special-day');
const _special_days = {
  1609455600000: {
    date: '2021-01-01 00:00:00',
    name: 'Første nyttårsdag',
  },
  1617228000000: {
    date: '2021-04-01 00:00:00',
    name: 'Skjærtorsdag',
  },
  1617314400000: {
    date: '2021-04-02 00:00:00',
    name: 'Langfredag',
  },
  1617400800000: {
    date: '2021-04-03 00:00:00',
    name: 'Påskeaften',
  },
  1617487200000: {
    date: '2021-04-04 00:00:00',
    name: 'Første påskedag',
  },
  1617573600000: {
    date: '2021-04-05 00:00:00',
    name: 'Andre påskedag',
  },
  1619820000000: {
    date: '2021-05-01 00:00:00',
    name: 'Arbeidernes dag',
  },
  1620856800000: {
    date: '2021-05-13 00:00:00',
    name: 'Kristi himmelfartsdag',
  },
  1621202400000: {
    date: '2021-05-17 00:00:00',
    name: '17. mai',
  },
  1621720800000: {
    date: '2021-05-23 00:00:00',
    name: 'Første pinsedag',
  },
  1621807200000: {
    date: '2021-05-24 00:00:00',
    name: 'Andre pinsedag',
  },
  1640300400000: {
    date: '2021-12-24 00:00:00',
    name: 'Julaften',
  },
  1640386800000: {
    date: '2021-12-25 00:00:00',
    name: 'Første Juledag',
  },
  1640473200000: {
    date: '2021-12-26 00:00:00',
    name: 'Andre juledag',
  },
  1640955600000: {
    date: '2021-12-31 14:00:00',
    name: 'Nyttårsaften',
  },
};

_marked_special_day_datepicker_wc.specialDays = _special_days;

A datepicker with marked days for the provided days will render.

Properties

Property Type Description
data-min-date String The minimum date used for selection
data-max-date String The maximum date used for selection
data-locale String The locale to be used, default is html[lang] or navigatior.language
data-disable-weekend Boolean Disabled weekend selection
data-init-date String Start with this date
data-use-pattern Boolean Use the pattern-attribute for validation
data-open Boolean Open on init
data-ignore-on-focus Boolean Do not open on focus, but by external initiator
data-persist-on-select Boolean Do not close the datepicker when date is selected
Contact us, Opens in new window