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.
$ 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
<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.
<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.
<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.
<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.
<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.
<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.
<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
<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
<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
- reinstall (fa531f7)
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
- reinstall (3220fb0)
0.3.4 (2021-11-10)
Miscellaneous chores
- Manually testing inclusion of CHANGELOG.md (f91eb76)
0.3.0 (2021-11-10)
Miscellaneous chores
-
reinstall (aac54a4)
-
rename (c20e410)
-
update references after name changing of util to utils (7dda072)
0.2.3 (2021-10-28)
Miscellaneous chores
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
- 🤖 Update deps (3421d38)
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
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)