Back to Datepicker-guidelines

CSS ComponentThe latest version of this package is: 14.0.0, 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@14.0.0

Please enter a valid date

Table of Contents

Edit this section, Opens in new window

Usage

Required markup

<form action="" autocomplete="off">
  <div class="if input-wrapper">
    <input type="text" class="if input-field date" data-lpignore="true" placeholder="25.6.2021" /><label
      class="if label"
      >Choose a date</label
    >
    <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>
Edit this section, Opens in new window

Frameworks

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

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

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

Role Attribute Element Usage
grid table
  • 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=IDREF 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
  • 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

Key Function
Esc Closes 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 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
  • 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

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
Edit this section, Opens in new window

Changelog

Change Log

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

14.0.0 (2021-11-09)

chore

  • πŸ€– Rename util to utils (f78721f)

Code Refactoring

  • πŸ’‘ Rename scope and repository (3ea5423)
  • πŸ’‘ Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Separate JS, WC and CSS documentation (e157ea2), closes #467386
  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

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

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.9.1 (2021-09-28)

Bug Fixes

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

12.11.0 (2021-07-05)

Bug Fixes

  • Bug when selection with mouse (fca0433)

12.10.0 (2021-06-29)

Bug Fixes

  • πŸ› Use correct styling for selection (1e72278)
  • πŸ› Use true instead of !0 (1187194)

Features

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

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)

Bug Fixes

  • πŸ› Update references (c08f107)

Code Refactoring

  • πŸ’‘ Rename and consolidate mixins (67cf470), closes #268081
  • πŸ’‘ Rename crosslink buttons to Shortcuts (c05bf9c), closes #336508
  • πŸ’‘ Rename Footer to Global Footer (7cb7239), closes #336508
  • πŸ’‘ Rename Notification to Alert Banner (8b4e48d), closes #336508

Features

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

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

10.0.0 (2021-02-15)

Code Refactoring

  • πŸ’‘ Rename form-group to input-wrapper (7ee3bae)

BREAKING CHANGES

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

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)

Features

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

6.36.0 (2020-10-12)

Features

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

6.22.0 (2020-07-01)

Features

  • 🎸 Add new color categories, update documentation (5496822)

6.11.0 (2020-04-22)

Bug Fixes

  • πŸ› Add sr only text for footer logo link (2971dd9)

6.9.0 (2020-04-15)

Features

  • 🎸 Add token documentation generation (172f997)

6.5.4 (2020-04-08)

Bug Fixes

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)

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

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

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

Features

  • 🎸 Add new typography rule for captions. Refactor weights (a033f4e)

5.0.1-alpha.135 (2020-02-25)

Bug Fixes

  • πŸ› Separeate if theme for pikaday (fd7ac70)

5.0.1-alpha.132 (2020-02-24)

Bug Fixes

  • πŸ› Use correct name for animation of backdrop (1aa3fa5)

Features

  • 🎸 Add less and sass files for datepicker (b9f30ac)

5.0.1-alpha.131 (2020-02-23)

Bug Fixes

  • πŸ› Adjust design of modal, add specificity to footer (fc9835f)

5.0.1-alpha.110 (2020-01-21)

Bug Fixes

  • πŸ› Remove duplicate support color (a7f346d)

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

Features

  • 🎸 Add datepicker (a4b1542)
  • 🎸 Finishing up datepicker first version (9da9556)
Edit this section, Opens in new window
Contact us, Opens in new window