Skip to main content



Standardises the way dates and time are displayed.

Takes an input of a standard date and/or time string (YYYY-MM-DDTHH:MM) and outputs it into the correct date and/or time format.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Display a date onlyHide the month and only show day and year
Display a time only

Considerations of best practice#


View example on Storybook

Component placement#

ns-date-time can be used in any html text element.


datedatestringYYYY-MM-DDTHH:MM, YYYY-MM-DD, HH:MMThe date and/or time to display
hide-datehideDatebooleanfalseWhether to hide the date
hide-timehideTimebooleanfalseWhether to hide the time
hide-dayhideDaybooleanfalseWhether to hide the day
hide-monthhideMonthbooleanfalseWhether to hide the month
hide-yearhideYearbooleanfalseWhether to hide the year

Specification notes#


The time specified in the date attribute is in 24hrs format. It is displayed with am/pm following the tone of voice guidelines.

Be careful when passing timezones in the date string due to British Summer Time.


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

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.