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

Edit this section

Usage

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>

Edit this section

Frameworks

Edit this section

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.

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

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

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"

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

🐛 Use correct variables, overrides and colors (f2f775e)
Set opacity when overlay is open (f9d77a3)

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

🐛 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 changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

💡 Change focus styles, remove whatinput (75fd31b) , closes #505205
rebuild and reinstall (f9fb687)

reinstall (885c74b)

fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

reinstall.. again.. (8f5efa8)
revert to v13.12.2 (2ff5399)

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

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

🐛 Update repository urls (3dae3a3) , closes #465976

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

✏️ Use correct title (5a2d4e1)
🤖 Use node v14 (4009973)

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)

Features

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

⚠ 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

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

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

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

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

Features

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

Features

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

🤖 reinstall (80dc63c)
update deps (3fbea80)

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

🐛 Hide responsive examples (6fec609) , closes #240240

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

lerna bootstrap (0128bdb)
lerna bootstrap (1019833)

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

lerna bootstrap (218a647)
lerna bootstrap (672c766)
lerna bootstrap (4d64d70)

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

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

Features

🎸 Add datepicker (a4b1542)
🎸 Finishing up datepicker first version (9da9556)

Edit this section

man.	tir.	ons.	tor.	fre.	lør.	søn.

CSS ComponentThe latest version of this package is: 17.0.38, Opens in new window

Table of Contents

Usage

Required markup

Frameworks

Accessibility

Role, property, state and tabindex attributes

Datepicker dialog

Calendar navigation buttons

Date grid

Keyboard support

Options

Changelog

Change Log

16.0.0 (2023-01-10)

⚠ BREAKING CHANGES

14.22.2 (2022-05-03)

Miscellaneous chores

14.20.1 (2022-04-19)

Miscellaneous chores

14.18.3 (2022-04-13)

Bug Fixes

14.14.0 (2022-04-07)

Features

Bug Fixes

Code Refactoring

Documentation Updates

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

14.2.2 (2021-12-10)

Code Refactoring

13.12.3 (2021-11-09)

⚠ BREAKING CHANGES

Documentation Updates

Code Refactoring

13.11.0 (2021-10-19)

Features

13.9.2 (2021-09-30)

Bug Fixes

13.7.0 (2021-09-22)

Documentation Updates

13.6.3 (2021-09-17)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

13.5.1 (2021-09-07)

Documentation Updates

13.3.0 (2021-09-02)

Documentation Updates

12.14.1 (2021-08-12)

Miscellaneous chores

12.13.1 (2021-08-11)

Bug Fixes

12.13.0 (2021-08-11)

Bug Fixes

12.11.0 (2021-07-05)

Bug Fixes

Code Refactoring

12.10.0 (2021-06-29)

Features

Bug Fixes

Documentation Updates

Miscellaneous chores

12.6.0 (2021-05-27)

Bug Fixes

12.0.0 (2021-05-05)

⚠ BREAKING CHANGES

Features

Bug Fixes

Code Refactoring

Miscellaneous chores

11.0.2 (2021-03-16)

Documentation Updates

10.0.0 (2021-02-15)

⚠ BREAKING CHANGES

Code Refactoring

9.3.1 (2021-02-05)

Bug Fixes