Back to Datepicker-guidelines

Web ComponentThe latest version of this package is: 0.6.9, 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.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-wc/datepicker@0.6.9

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

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.4.0 (2022-03-10)

Features

  • 🎸 Add demo mode to datepicker (3aa782c)

Bug Fixes

  • 🐛 Set transition to none, so the resize func works (bbb8ff4)

0.3.7 (2022-03-09)

Bug Fixes

  • 🐛 Do not use utils positioning (1c0c520)

Miscellaneous chores

0.3.6 (2022-03-09)

Bug Fixes

  • 🐛 Fix datepicker issues (e9fd8af)

Miscellaneous chores

  • move scrolllock adjustments to a window resize as well (c3e6223)

0.3.5 (2022-03-08)

Miscellaneous chores

0.3.4 (2021-11-10)

Miscellaneous chores

  • Manually testing inclusion of CHANGELOG.md (f91eb76)

0.3.0 (2021-11-10)

Miscellaneous chores

0.2.3 (2021-10-28)

Miscellaneous chores

  • reinstall (0f764a7)

  • update after change of navigational structure (e8962a1)

0.2.1 (2021-10-14)

Miscellaneous chores

  • 🤖 Update dependencies (079ff16)

0.2.0 (2021-10-14)

Documentation Updates

  • ✏️ Update documentation examples (31f7fd4)

Miscellaneous chores

0.1.0 (2021-10-01)

⚠ BREAKING CHANGES

  • 🧨 We are now serving IIFE files instead of UMD, for a better dev

experience when including scripts with script-tag

  • 🧨 All webcomponent versions has been reset, due to new scope; @ids-wc

✅ Closes: 467386

Bug Fixes

  • 🐛 Rename required file to use IIFE, escape correctly (dff7a27)

  • 🐛 Use correct classnames for input-label and wrapper (04172fd)

Documentation Updates

  • ✏️ Add and update docs for webcomponents (18f4342), closes #467386

Miscellaneous chores

  • 🤖 prettier (c4334ab)

  • 🤖 Remove babel, no longer required (9f6497c)

  • 🤖 Remove unneeded rc files (fdcac58)

  • 🤖 Remove usage of .npmignore, use files-prop instead (8b7c55e)

  • 🤖 Reset versions for webcomponents, due to new scope (f540b01)

  • 🤖 Set correct output name (98da4f6)

  • 🤖 Update prettier rc files (7d0e3c9)

  • 🤖 Use correct dependencies after renaming of scope (38aba43), closes #467386

  • 🤖 Use correct names for import (72e77f3)

  • 🤖 Use iife instead of umd (ae0ebcc)

  • bootstrap (420cc99)

  • initial commit (8d74b20)

  • use correct import path (1fff2cb)

Contact us, Opens in new window