Back to Datepicker-guidelines

CSS ComponentThe latest version of this package is: 17.0.1, 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.1

Please enter a valid date

Table of Contents

Edit this section, Opens in new window


Required markup

Please enter a valid date
<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>
      class="if datepicker"
      <button type="button" class="if close"><span class="if axe sr-only">Close</span></button>
      <div class="if header" id="ids-datepicker-header-_o67k6g8uk">
          class="if previous year control"
          aria-label="Previous year"
          class="if previous month control"
          aria-label="Previous month"
        <button type="button" aria-live="polite" class="if title" id="ids-datepicker-control-title">juni 2021</button>
          class="if next month control"
          aria-label="Next month"
          class="if next year control"
          aria-label="Next year"
      <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>
        <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 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 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 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 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 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>
Edit this section, Opens in new window


NOTE! These examples are just a visual reference to how the design can be implemented. They are not a FULLY implemented, but only adjusted to prove the concept of styling datepickers in other frameworks! YMMV.

Edit this section, Opens in new window


Role, property, state and tabindex attributes

Datepicker dialog

dialogdivIdentifies the element as a dialog .
aria-modal="true"divIndicates the dialog is modal.
aria-labelledby="IDREF"divRefers to the heading containing the currently displayed month and year, which defines the accessible name for the dialog.
  • Indicates the element that displays information about keyboard commands for navigating the grid should be automatically announced by screen readers.
  • The script slightly delays display of the information so screen readers are more likely to read it after information related to change of focus.

Calendar navigation buttons

aria-label="String"buttonDefines the accessible name of the button (e.g. Next Year).
  • When the month and/or year changes the content of the button.if.title element is updated.
  • Indicates the button.if.title should be automatically announced by screen readers.

Date grid

  • Identifies the table element as a grid widget.
  • Since the grid role is applied to a table element, the row, colheader, and gridcell roles do not need to be specified because they are implied by tr, th, and td tags.
aria-labelledby=IDREFtableDefines the accessible name for the grid using the button.if.title that shows the month and year of the dates displayed in the grid.
  • Identifies the cell for the currently selected date, i.e., the date value present in the date input.
  • Only set on the cell representing the currently selected date, no other cells have aria-selected specified.

Keyboard support

EscCloses the datepicker
Space, Enter
  • Select the date, close the dialog, and move focus to the Choose Date button.
  • Update the value of the Date input with the selected date.
  • Update the accessible name of the Choose Date button to include the selected date.
Up ArrowMoves focus to the same day of the previous week.
Down ArrowMoves focus to the same day of the next week.
Right ArrowMoves focus to the next day.
Left ArrowMoves focus to the previous day.
HomeMoves focus to the first day (e.g Sunday) of the current week.
EndMoves focus to the last day (e.g. Saturday) of the current week.
Page Up
  • Changes the grid of dates to the previous month.
  • Sets focus on the same day of the same week. If that day does not exist, then moves focus to the same day of the previous or next week.
Shift + Page Up
  • Changes the grid of dates to the previous Year.
  • Sets focus on the same day of the same week. If that day does not exist, then moves focus to the same day of the previous or next week.
Page Down
  • Changes the grid of dates to the next month.
  • Sets focus on the same day of the same week. If that day does not exist, then moves focus to the same day of the previous or next week.
Shift + Page Down
  • Changes the grid of dates to the next Year.
  • Sets focus on the same day of the same week. If that day does not exist, then moves focus to the same day of the previous or next week.
Edit this section, Opens in new window


td.todayMarks cell as today cell as the beginning of the current selection cell as a part of a date range currently beeing selected cell as the end of the currently selecting date range cell as the beginning of the selected date range cell as currently selected day or part of a selected date range cell as the end of the selected date range
td:focus, the cell as focused
td:hover, the cell as hovered
td.non-selectable-dayMarks cell as a non selectable day. Only used for days before and after current month
Edit this section, Opens in new window


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)


  • The input field component now has a border-radius - 6px.

"feature 686990"

  • Merged PR 98055: feat(input-fields): style update for input fields (205b85a), closes #686990

14.22.2 (2022-05-03)

Miscellaneous chores

  • package locks: update package locks (813eac7)
  • update deps: package locks updates (38e7a90)

14.20.1 (2022-04-19)

Miscellaneous chores

  • changelog: regenerate all 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 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)


  • 🎸 Add CSS variables for datepicker (730acc6)

Bug Fixes

  • 🐛 Use correct variables, overrides and colors (f2f775e)

  • Set opacity when overlay is open (f9d77a3)

Code Refactoring

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

14.8.1 (2022-02-23)

Bug Fixes

  • 🐛 Add missing imports of typography CSS variables (e716c65) , closes #559412

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

  • use correct versions (f1b5deb)

  • Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

  • Add 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)


  • 🧨 The scope for If Design System npm packages has now changed from @if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-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

  • ✏️ Documentation adjustments (73c09e3) , closes #467386

  • ✏️ 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

  • 💡 Categorize components (9965266) , closes #490579

  • 💡 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)

  • fix all old references to util (d57bf17)

  • prepare for merge (0184490)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • use correct version for utils (49e72d9)

13.11.0 (2021-10-19)


  • 🎸 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

  • 🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

  • 🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

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)


  • 🎸 Adjust styling, separate out core, update preproccesors (a0bb1fd)

Bug Fixes

  • 🐛 Use correct styling for selection (1e72278)

  • 🐛 Use true instead of ! 0 (1187194)

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

  • 🐛 Manually set firstPublished and lastModified (e83af7d)

  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)


  • 🧨 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


  • 🎸 Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component

Bug Fixes

Code Refactoring

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)


  • 🧨 form-group is now renamed to input-wrapper, a more logical name

Code Refactoring

  • 💡 Rename form-group to input-wrapper (7ee3bae)

  • reinstall packages (fcfacf4)

9.3.1 (2021-02-05)

Bug Fixes

  • 🐛 Make jquery ui datepicker styling non-obstrusive (a9b174e) , closes #342030

8.2.1 (2021-01-13)

Bug Fixes

  • 🐛 Fix some datepicker styling, add working demo for mobile (b344472) , closes #311667

7.8.0 (2020-11-30)

Bug Fixes

  • 🐛 Use scoped kbd tags (89dd3f6)

7.1.0 (2020-11-16)


  • 🎸 Add support for auto generation of components index (9444600) , closes #309650

6.43.3 (2020-11-03)

Miscellaneous chores

  • 🤖 Manually set version (e4d9ca6)

  • 🤖 Rename repository from guybrush to if-design-system (c18bccd)

reinstall (2cefe15)

6.36.0 (2020-10-12)


  • 🎸 Add updated focus styling for datepicker (2ecaa3b)

Miscellaneous chores

  • 🤖 Add what-input to demo and dev files (56801b7)

  • 🤖 Rename focus style mixins (e18b688)

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 links to workitems and commits (ab2887b)

6.23.0 (2020-07-01)

Miscellaneous chores

reinstall (1ab1527)

6.22.0 (2020-07-01)


  • 🎸 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

6.15.2 (2020-05-11)

Miscellaneous chores

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

6.9.1 (2020-04-16)

Documentation Updates

  • ✏️ Use correct badge color in (03b563e)

6.9.0 (2020-04-15)


  • 🎸 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

  • 🤖 Delete really old install files, update README files (c5d4893)

  • 🤖 Remove .npmrc fles (4e26249)

5.0.1-alpha.160 (2020-03-12)

Miscellaneous chores

5.0.1-alpha.151 (2020-03-05)


  • 🎸 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

5.0.1-alpha.143 (2020-02-26)

Documentation Updates

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)


  • 🎸 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

  • 🐛 Remove duplicate support color (a7f346d)

  • testing sketch (003a233)

5.0.1-alpha.106 (2020-01-14)

Miscellaneous chores

  • 🤖 lerna bootstrap, npm i (b49d0cb)

5.0.1-alpha.105 (2020-01-13)


  • 🎸 Add datepicker (a4b1542)

  • 🎸 Finishing up datepicker first version (9da9556)

Edit this section, Opens in new window
Contact us, Opens in new window