Date

Examples
Typescript ❤️

Fabric Date React Components

Install
yarn add @atlaskit/date
npm
@atlaskit/date
Source
Bitbucket
Bundle
unpkg.com
Changelog
Latest

2.0.0

Major Changes

  • #117363 10a0f7f6c2027 - This package's peerDependencies have been adjusted for react and/or react-dom to reflect the status of only supporting React 18 going forward. No explicit breaking change to React support has been made in this release, but this is to signify going forward, breaking changes for React 16 or React 17 may come via non-major semver releases.

    Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026

Patch Changes

  • Updated dependencies

Note: This component is designed for internal Atlassian development.

External contributors will be able to use this component but will not be able to submit issues.

This component is the implementation of the Date element in React.

Usage

import { Date, Color } from '@atlaskit/date';

Date

with no onClick

29/07/1988

with onClick

29/07/1988

Props

onClick function

function
value,
event
=> undefined

value number required

format string = "dd/MM/yyyy"

color union = "grey"

One of
"grey",
"red",
"blue",
"green",
"purple",
"yellow"

className string

children union

One of
default.FunctionComponentdefault.PropsWithChildrenProps,
string,
default.ReactNode

You can also use Date lozenge

Lozenge is available in the ADG3 Lozenge colors.

color prop is optional and has the following option 'grey' | 'red' | 'blue' | 'green' | 'purple' | 'yellow'.

Custom colors examples

29/07/1988

29/07/1988

29/07/1988

29/07/1988

29/07/1988

29/07/1988

You can also specify custom format for the date. We use date-fns. Check out format function documentation.

Custom format examples

00-29-88