Skip to main content

ns-datepicker

Introduction#

Use to help the user enter a date in a form.

This component wraps our ns-inputter component. Guidelines defined on the ns-inputter should also be followed when using this component. ns-inputter documentation

Datepicker Types#

ns-datepicker supports 2 types default and mask. When type is set to default the date-picker will display a calendar UI for selecting the date. On mobile/touch devices this will use the browsers native calendar. On desktop/non-touch devices it will use the Nucleus calendar component.

Best practice#

Also see ns-inputter best practices

๐Ÿ’š Do's๐Ÿ’” Don'ts
Use the default type for picking a date from a rangeChange the date format
Use the default type for picking a date that the user might not be sure of (e.g. Next Friday)
Use the mask type for picking a dates that are well know to the user (e.g. Date of birth)

Considerations of best practices#

When the browser supports the <input type="date"> the format of the input will change depending on the settings of thier device. For example users in UK will get the dd/mm/yyyy date format where as users in United States of America will get the m/d/yy date format. Regardless of the input format dates are always returned following the ISO 8601 date format

ISO 8601 date format#

This component uses the ISO 8601 date format: YYYY-MM-DD. This allows us to build upon the native <input type="date"> which also uses the same standard and provides a consistent approach to handling dates throughout nucleus.

Browser support#

Some browsers do not support type='date' (e.g. Safari on Desktop). The component detects if the browser supports this input and will fallback to use the mask type instead.

Usage#

View example on Storybook

Component placement#

The ns-datepicker component can be used in the following components:

Specification#

Also see ns-inputter specification

AttributeTypeDefaultOptionsDescription
autocompletestring"off"Value to pass to the input autocomplete attribute.
helperstringSee ns-inputter.
labelstringThe text to place in the label.
maxstringThe maximum date allowed to be entered into the input. Must be in YYYY-MM-DD format. Validation will trigger if date is entered after this value
minstringThe minimum date allowed to be entered into the input. Must be in YYYY-MM-DD format. Validation will trigger if date is before after this value
namestring"date"See ns-inputter.
typestring"default"default, maskUse to select the input format. Default is the native date input.
validationarraySee ns-inputter. minDate and Max date are automatically applied if the min and max values are populated.
valuestringThe value the input inside the component. This can be used to add an initial value.
SlotsType
tip-detailsdiv

Design Tokens

You can change the branded look and feel of the ns-datepicker by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "background-color": "#FFFFFF",
  "border-color": "#C8C9C7",
  "icon": {
    "color": "#005EB8"
  },
  "hover": {
    "icon": {
      "color": "#333F48"
    }
  },
  "calendar-button": {
    "typography": "action",
    "color": "#005EB8",
    "focus": {
      "color": "#003C71",
      "outline-color": " #FFDD57"
    },
    "hover": {
      "color": "#003C71",
      "text-decoration-color": "rgba(0, 60, 113, .25)"
    }
  },
  "header": {
    "typography": "action",
    "color": "#FFFFFF",
    "background-color": "#005EB8"
  },
  "close": {
    "color": "#FFFFFF",
    "focus-outline-color": " #FFC72C"
  }
}

Feedback#

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ You can also contact the team on Slack on the #product-nucleus channel!

Related links#