CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window
Date and time pickers allow users to select a single or a range of dates and times.
This component provides .css
, .styl
, .less
and .scss
-files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-core/datepicker@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
Required markup
<form action="" autocomplete="off">
<div class="if input-wrapper">
<label for="second-input" class="if label">Choose a date</label>
<input id="second-input" type="text" class="if input-field date" data-lpignore="true" placeholder="25.6.2021" />
<div class="if input-error" id="ids-datepicker-input-error-_o67k6g8uk">Please enter a valid date</div>
<div class="if backdrop" role="presentation" id="ids-datepicker-backdrop-_o67k6g8uk"></div>
<div
class="if datepicker"
tabindex="0"
aria-labelledby="label-_o67k6g8uk"
aria-modal="true"
role="dialog"
aria-live="polite"
id="ids-datepicker-container-_o67k6g8uk"
aria-hidden="true"
>
<button type="button" class="if close"><span class="if axe sr-only">Close</span></button>
<div class="if header" id="ids-datepicker-header-_o67k6g8uk">
<button
id="ids-datepicker-control-prev-year"
class="if previous year control"
type="button"
aria-label="Previous year"
tabindex="0"
></button>
<button
id="ids-datepicker-control-prev-month"
class="if previous month control"
type="button"
aria-label="Previous month"
tabindex="0"
></button>
<button type="button" aria-live="polite" class="if title" id="ids-datepicker-control-title">juni 2021</button>
<button
id="ids-datepicker-control-next-month"
class="if next month control"
type="button"
aria-label="Next month"
tabindex="0"
></button>
<button
id="ids-datepicker-control-next-year"
class="if next year control"
type="button"
aria-label="Next year"
tabindex="0"
></button>
</div>
<table class="if calendar" role="grid" id="ids-datepicker-table-_o67k6g8uk" aria-labelledby="label-_o67k6g8uk">
<thead class="if">
<tr class="if">
<th class="if dayName" scope="col"><abbr title="mandag">man.</abbr></th>
<th class="if dayName" scope="col"><abbr title="tirsdag">tir.</abbr></th>
<th class="if dayName" scope="col"><abbr title="onsdag">ons.</abbr></th>
<th class="if dayName" scope="col"><abbr title="torsdag">tor.</abbr></th>
<th class="if dayName" scope="col"><abbr title="fredag">fre.</abbr></th>
<th class="if dayName" scope="col"><abbr title="lørdag">lør.</abbr></th>
<th class="if dayName" scope="col"><abbr title="søndag">søn.</abbr></th>
</tr>
</thead>
<tbody class="if">
<tr class="if">
<td class="if day non-selectable-day" data-day="31"></td>
<td class="if day" data-day="1" tabindex="-1"></td>
<td class="if day" data-day="2" tabindex="-1"></td>
<td class="if day" data-day="3" tabindex="-1"></td>
<td class="if day" data-day="4" tabindex="-1"></td>
<td class="if day" data-day="5" tabindex="-1"></td>
<td class="if day" data-day="6" tabindex="-1"></td>
</tr>
<tr class="if">
<td class="if day" data-day="7" tabindex="-1"></td>
<td class="if day" data-day="8" tabindex="-1"></td>
<td class="if day" data-day="9" tabindex="-1"></td>
<td class="if day" data-day="10" tabindex="-1"></td>
<td class="if day" data-day="11" tabindex="-1"></td>
<td class="if day" data-day="12" tabindex="-1"></td>
<td class="if day" data-day="13" tabindex="-1"></td>
</tr>
<tr class="if">
<td class="if day" data-day="14" tabindex="-1"></td>
<td class="if day" data-day="15" tabindex="-1"></td>
<td class="if day" data-day="16" tabindex="-1"></td>
<td class="if day" data-day="17" tabindex="-1"></td>
<td class="if day" data-day="18" tabindex="-1"></td>
<td class="if day" data-day="19" tabindex="-1"></td>
<td class="if day" data-day="20" tabindex="-1"></td>
</tr>
<tr class="if">
<td class="if day" data-day="21" tabindex="-1"></td>
<td class="if day" data-day="22" tabindex="-1"></td>
<td class="if day" data-day="23" tabindex="-1"></td>
<td class="if day" data-day="24" tabindex="-1"></td>
<td class="if day today" data-day="25" tabindex="-1"></td>
<td class="if day" data-day="26" tabindex="-1"></td>
<td class="if day" data-day="27" tabindex="-1"></td>
</tr>
<tr class="if">
<td class="if day" data-day="28" tabindex="-1"></td>
<td class="if day" data-day="29" tabindex="-1"></td>
<td class="if day" data-day="30" tabindex="-1"></td>
<td class="if day non-selectable-day" data-day="1"></td>
<td class="if day non-selectable-day" data-day="2"></td>
<td class="if day non-selectable-day" data-day="3"></td>
<td class="if day non-selectable-day" data-day="4"></td>
</tr>
<tr class="if">
<td class="if day non-selectable-day is-hidden" data-day="5"></td>
<td class="if day non-selectable-day is-hidden" data-day="6"></td>
<td class="if day non-selectable-day is-hidden" data-day="7"></td>
<td class="if day non-selectable-day is-hidden" data-day="8"></td>
<td class="if day non-selectable-day is-hidden" data-day="9"></td>
<td class="if day non-selectable-day is-hidden" data-day="10"></td>
<td class="if day non-selectable-day is-hidden" data-day="11"></td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Accessibility
Role, property, state and tabindex attributes
Datepicker dialog
Role | Attribute | Element | Usage |
---|---|---|---|
dialog | div | Identifies the element as a dialog . | |
aria-modal="true" | div | Indicates the dialog is modal. | |
aria-labelledby="IDREF" | div | Refers to the heading containing the currently displayed month and year, which defines the accessible name for the dialog. | |
aria-live="polite" | div |
|
Calendar navigation buttons
Role | Attribute | Element | Usage |
---|---|---|---|
aria-label="String" | button | Defines the accessible name of the button (e.g. Next Year). | |
aria-live="polite" | button.if.title |
|
Date grid
Role | Attribute | Element | Usage |
---|---|---|---|
grid | table |
| |
aria-labelledby= | table | Defines the accessible name for the grid using the button.if.title that shows the month and year of the dates displayed in the grid. | |
aria-selected="true" | td |
|
Keyboard support
Key | Function |
---|---|
Esc | Closes the datepicker |
Space, Enter |
|
Up Arrow | Moves focus to the same day of the previous week. |
Down Arrow | Moves focus to the same day of the next week. |
Right Arrow | Moves focus to the next day. |
Left Arrow | Moves focus to the previous day. |
Home | Moves focus to the first day (e.g Sunday) of the current week. |
End | Moves focus to the last day (e.g. Saturday) of the current week. |
Page Up |
|
Shift + Page Up |
|
Page Down |
|
Shift + Page Down |
|
Options
Class | Usage |
---|---|
td.today | Marks cell as today |
td.is-selecting-start | Marks cell as the beginning of the current selection |
td.is-selecting | Marks cell as a part of a date range currently beeing selected |
td.is-selecting-end | Marks cell as the end of the currently selecting date range |
td.is-selected-start | Marks cell as the beginning of the selected date range |
td.is-selected | Marks cell as currently selected day or part of a selected date range |
td.is-selected-end | Marks cell as the end of the selected date range |
td:focus, td.is-focused | Marks the cell as focused |
td:hover, td.is-hovered | Marks the cell as hovered |
td.non-selectable-day | Marks cell as a non selectable day. Only used for days before and after current month |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
16.0.0 (2023-01-10)
⚠ BREAKING CHANGES
- The input field component now has a border-radius - 6px.
"feature 686990"
14.22.2 (2022-05-03)
Miscellaneous chores
14.20.1 (2022-04-19)
Miscellaneous chores
- changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and
packages (349fda4)
,
closes #586063
. We regenerate the files to include all relevant commits and to use
conventional-commits
at 100%
14.14.0 (2022-04-07)
Features
- 🎸 Add CSS variables for datepicker (730acc6)
Bug Fixes
Code Refactoring
- 💡 Use MDX (cc182da)
Documentation Updates
-
✏️ Add demo flag to datepicker wc (d94a639)
-
✏️ Remove interactive flag from datepicker examples (13c0be3)
-
✏️ Update documentation examples (a9c0b2d)
-
✏️ Use codeexample (3d7f3f9)
-
Add devserver (94bf1d9)
-
use a later version for datepicker (1542827)
14.9.0 (2022-03-03)
Miscellaneous chores
- 🤖 Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
reinstall (afce1f2)
reinstall (67f3140)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
reinstall (885c74b)
-
fix changelogs manually (b1232b4)
reinstall (545a069)
reinstall (e149c2c)
13.12.3 (2021-11-09)
⚠ BREAKING CHANGES
- 🧨 The scope for If Design System npm packages has now changed from
@if-design-system
to@ids-core
. We have also renamed the repository fromif-design-system
toids-core
- 🧨 Util is now renamed to Utils
- 🧨 We have now changed the navigation structure for the documentation site. Please update any saved links!
- 🧨 Navigation structure has now changed. Please see release notes!
- 🧨 Documentation and javascript/webcomponent is now separated out into different scopde; ids-js and ids-wc
Documentation Updates
-
✏️ Move position of the quick links (5cb0897)
-
✏️ Remove unneeded margins for shortcuts (36c7e8d)
-
✏️ Separate JS, WC and CSS documentation (e157ea2) , closes #467386
-
✏️ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
💡 Reduce spacing tokens, use correct size tokens (97aa461)
-
💡 Rename scope and repository (3ea5423)
-
💡 Use new navigation structure for documentation (415aee5) , closes #490579
-
another change in the structure (38a0d2e)
-
🤖 Rename util to utils (f78721f)
bootstrap (6fc1ed8)
reinstall (da80dba)
13.11.0 (2021-10-19)
Features
- 🎸 Input field hot reload (eac76b7)
13.9.2 (2021-09-30)
Bug Fixes
- 🐛 Complete the pseudo-element fix (1dcee2c)
13.7.0 (2021-09-22)
Documentation Updates
- ✏️ Update linking layout and naming (15c383b)
13.6.3 (2021-09-17)
Bug Fixes
13.6.0 (2021-09-08)
Documentation Updates
- Use default shortcut listing for demo links (a746602)
13.5.1 (2021-09-07)
Documentation Updates
- ✏️ Place ids-datepicker correctly (a21b467)
13.3.0 (2021-09-02)
Documentation Updates
bootstrap (d23e139)
- 🤖 Use correct order for diff (cc6a4fd)
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
12.13.0 (2021-08-11)
Bug Fixes
-
🐛 Make sure overlays and modals has correct zindexes (828b572) , closes #454896
-
🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
-
🤖 Reinstall (e660696)
12.11.0 (2021-07-05)
Bug Fixes
- Bug when selection with mouse (fca0433)
Code Refactoring
-
💡 Refactor styling to support shadow dowm (69beec5)
-
🤖 Update demo and dev files for datepicker (554db48)
-
🤖 Update documentation regarding datepicker (2441d09)
12.10.0 (2021-06-29)
Features
- 🎸 Adjust styling, separate out core, update preproccesors (a0bb1fd)
Bug Fixes
Documentation Updates
- ✏️ Update datepicker docs for js and webcomponent (74eef32)
Miscellaneous chores
-
🤖 Add back tests (9879280)
-
🤖 Remove datepicker-mobile demo (b8f4f40)
-
🤖 Remove unwanted documentation files (00c4dc8)
-
🤖 Starting to amend datepicker (084d31f)
-
🤖 Update demo and dev files (07f7d3b)
-
🤖 Update demo and dev files for datepicker (d622782)
-
🤖 Update published date (61e7ccf)
12.6.0 (2021-05-27)
Bug Fixes
12.0.0 (2021-05-05)
⚠ BREAKING CHANGES
- 🧨 All of the mixins have now been renamed
- 🧨 Notification is now renamed to Alert Banner
- 🧨 This extracts the Hero variation with no image into a separate, design updated component named Header
- 🧨 Footer is now renamed to Global Footer
- 🧨 Crosslinks have seized to exist. They are all extracted into separate components. This commit converts crosslink buttons into the new component Shortcuts
Features
Bug Fixes
- 🐛 Update references (c08f107)
Code Refactoring
-
💡 Rename crosslink buttons to Shortcuts (c05bf9c) , closes #336508
-
💡 Rename Notification to Alert Banner (8b4e48d) , closes #336508
Miscellaneous chores
-
🤖 Convert typography tokens from theo to SD (e48f255)
-
🤖 Convert util tokens from theo to style-dictionary (99fb4f5)
-
🤖 Finalize breakpoint token conversion (f50ea0d)
-
🤖 Make sure we have correct deps set, and used (5d2e0fb)
-
🤖 Reinstall (2c763ea)
-
🤖 Reinstall (69e1a5b)
-
🤖 Update all design token references (c640d15)
-
🤖 Update references to util variables (b79ec36)
-
🤖 Updating links (70f166e)
rebuild (7edb430)
11.0.2 (2021-03-16)
Documentation Updates
-
✏️ Update documentation after regression (c344d10)
-
🤖 Rename Change Log to Changelog (d412e63)
-
🤖 Remove all references to sketch (35fc554) , closes #339203
-
🤖 Update package fields (200c0af)
10.0.0 (2021-02-15)
⚠ BREAKING CHANGES
- 🧨 form-group is now renamed to input-wrapper, a more logical name
Code Refactoring
9.3.1 (2021-02-05)
Bug Fixes
8.2.1 (2021-01-13)
Bug Fixes
7.8.0 (2020-11-30)
Bug Fixes
- 🐛 Use scoped kbd tags (89dd3f6)
7.1.0 (2020-11-16)
Features
6.43.3 (2020-11-03)
Miscellaneous chores
reinstall (2cefe15)
6.36.0 (2020-10-12)
Features
- 🎸 Add updated focus styling for datepicker (2ecaa3b)
Miscellaneous chores
6.29.4 (2020-09-09)
Documentation Updates
- ✏️ Use correct strong element with if class (6b484df)
6.29.3 (2020-09-07)
Documentation Updates
- ✏️ Merge atoms/molecules/organisms into components (90ed590)
6.26.12 (2020-08-03)
Documentation Updates
- ✏️ Update documentation for the new registry (3e7ba20)
Miscellaneous chores
-
🤖 lerna bootstrap (d835ec9)
-
🤖 Temporarily remove package-lock.json-files (87b3f7f)
-
🤖 Update references to new scope (b5575dd)
6.26.10 (2020-07-14)
Miscellaneous chores
-
🤖 Manually update some links (ecc0133)
-
🤖 Update CHANGELOG.md links to workitems and commits (ab2887b)
6.23.0 (2020-07-01)
Miscellaneous chores
reinstall (1ab1527)
6.22.0 (2020-07-01)
Features
- 🎸 Add new color categories, update documentation (5496822)
Miscellaneous chores
- 🤖 Search and replace old color usage (3e5abb0)
6.21.11 (2020-06-16)
Miscellaneous chores
- 🤖 Update references to mixins (3edd5ba)
6.21.6 (2020-06-11)
Miscellaneous chores
- 🤖 Remove .zip files from .npmignore (b3bc7dc)
6.19.0 (2020-06-02)
Miscellaneous chores
reinstall (3416c65)
6.15.5 (2020-05-15)
Miscellaneous chores
-
prepped and ready to separate documentation site from code (d3e1fd9)
-
pruning and reinstalling (5cda0bc)
reinstall (939dae6)
reinstall (cae55fb)
- Remove livingcss data and add frontmatter data (b384946)
6.15.4 (2020-05-14)
Miscellaneous chores
- lerna bootstrap (0c4f599)
6.15.2 (2020-05-11)
Miscellaneous chores
- reinstall and build (aedc097)
6.15.0 (2020-05-07)
Miscellaneous chores
6.11.0 (2020-04-22)
Bug Fixes
- 🐛 Add sr only text for footer logo link (2971dd9)
6.10.9 (2020-04-22)
Miscellaneous chores
-
🤖 Add *.zip-files to .npmignore-files (062b8b0)
-
🤖 Remove references to verb in package.json files (cfdaaec)
6.10.6 (2020-04-17)
Miscellaneous chores
- 🤖 lerna bootstrap (d8faf26)
6.9.1 (2020-04-16)
Documentation Updates
- ✏️ Use correct badge color in README.md (03b563e)
6.9.0 (2020-04-15)
Features
- 🎸 Add token documentation generation (172f997)
6.6.0 (2020-04-09)
Documentation Updates
- ✏️ Change edit this document to edit this section (791b646)
6.5.4 (2020-04-08)
Bug Fixes
6.5.3 (2020-04-06)
Documentation Updates
- ✏️ Some more sg updates and tweaks (d1d6802)
6.4.3 (2020-04-03)
Bug Fixes
- 🐛 Revert positional top left right bottom from 0 to auto (f06d59a)
6.4.2 (2020-04-03)
Bug Fixes
-
🐛 Remove misuse of unset, none, auto and initial (87624d7)
-
🐛 Use initial instead of none and unset (d75bc65)
6.3.4 (2020-04-01)
Miscellaneous chores
- 🤖 Use more of if styling on documentation site (2eaf386)
5.2.0 (2020-03-17)
Code Refactoring
- 💡 Reorganized sections in the documentations (dd31802) . Adjust navigation styling on the left hand side. The reorganization is mostly to make the site load a bit smoother
5.0.4 (2020-03-14)
Miscellaneous chores
5.0.1-alpha.160 (2020-03-12)
Miscellaneous chores
5.0.1-alpha.151 (2020-03-05)
Features
- 🎸 Add new typography rule for captions. Refactor weights (a033f4e) . and updated documentation
5.0.1-alpha.150 (2020-03-05)
Documentation Updates
-
✏️ Adjust datepicker to behave in documentation (f459e7c)
-
✏️ Hide datepicker window on mobile (b98c60f)
5.0.1-alpha.149 (2020-03-05)
Miscellaneous chores
-
🤖 Finish adjusting components to baseline grid (50f7a69) . Chang approx 6888 raw values to variables
-
🤖 Starting to align components to new baseline grid (cf2c073)
-
Align typography to baseline. First attempt (f4447e9)
5.0.1-alpha.147 (2020-03-02)
Miscellaneous chores
5.0.1-alpha.145 (2020-02-26)
Miscellaneous chores
- lerna bootstrap (91ace79)
5.0.1-alpha.143 (2020-02-26)
Documentation Updates
- ✏️ Some tweaks (4db6b23)
5.0.1-alpha.136 (2020-02-25)
Documentation Updates
- ✏️ Add links to datepicker implementation examples (70fd9c0)
5.0.1-alpha.135 (2020-02-25)
Bug Fixes
- 🐛 Separeate if theme for pikaday (fd7ac70)
5.0.1-alpha.132 (2020-02-24)
Features
- 🎸 Add less and sass files for datepicker (b9f30ac)
Bug Fixes
- 🐛 Use correct name for animation of backdrop (1aa3fa5)
Documentation Updates
-
✏️ Add links to demo pages for different datepicker libs (846d98e)
-
✏️ Make react logo bigger in implementation file for dp (e2936f1)
Miscellaneous chores
-
🤖 Add demo example for react-datepicker (e0ae0b7)
-
🤖 Started to add more implementation examples for (83c43ce) . the datepicker component
5.0.1-alpha.131 (2020-02-23)
Bug Fixes
- 🐛 Adjust design of modal, add specificity to footer (fc9835f) . And add backdrop mixin to utils. Might want to move this into another package
5.0.1-alpha.127 (2020-02-18)
Documentation Updates
- ✏️ Add some icon to footer in all demo and doc files (f2bdaae)
5.0.1-alpha.117 (2020-02-06)
Documentation Updates
- ✏️ Add edit links to documentation files (7c6e770)
5.0.1-alpha.110 (2020-01-21)
Bug Fixes
5.0.1-alpha.106 (2020-01-14)
Miscellaneous chores
- 🤖 lerna bootstrap, npm i (b49d0cb)