The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.
Consequently, we have decided to not include support for IE in the Design Library website.
Date pickers simplify the task of selecting a date in a visual representation of a calendar.
Date pickers are used when users need to enter a date. The user can enter the date as text, but the date picker also allows the user to select the date in a visual representation of a calendar.
By using a date picker, many errors concerning format and wrong characters can be avoided.
Always use a date picker when the user should enter a complete date. If only a year, a month, a day (or a combination of two options) is needed, use separate input fields. For example a credit card expiry month. Dropdowns could optionally be used if the range of values is limited.
The date picker can be equipped with a variety of features, on top of the base component:
Sometimes there is a need to show days which are not selectable, for example a bank holiday which can not be chosen when initiating a cross border payment. The dates which are not selectable should then have a gray background (#E6E6E6) with a gray number (#B3B3B3). If the user tries to select a not selectable date, there will be a tooltip telling the user the date is not available.
The last days/first days of the previous month/next month should be gray (#B3B3B3) on white background (#FFFFFF). If the user click on one of those days, the datepicker will change to that month.
If a user has to enter a time period, instead of two separate date pickers, use the date range picker (below).
This feature lets users quickly and easily select a set range of dates. It should be used when it is necessary for users to quickly select commonly used range of dates. On mobile, the preset date ranges are presented as a row of scrollable filter tags.
Range preset for desktop
Range preset for mobile
The date picker can be used as Normal or with a few options:
On desktop and tablet, the date picker is displayed below the date input field.
On mobile, the date picker cover the whole viewport as a takeover. The header part (headline, dropdowns, and day labels) and bottom part (actionable options) are fixed.
The user is able to increase or decrease the date by pressing the up/down arrows on the keyboard: