This low profile kit displays time. Elapsed, current, future, or otherwise.
By default, the timestamp kit will display the date and time as shown here. If the date is NOT within the current year, the year will also be shown while dates in the current year will not show the year.
import React from 'react' import { Timestamp } from 'playbook-ui' const todaysDate = new Date() const futureYear = new Date().getFullYear() + 4 const pastYear = new Date().getFullYear() - 1 const month = new Date().getMonth() const date = new Date().getDate() const hours = new Date().getHours() const minutes = new Date().getMinutes() const futureDate = new Date(futureYear, month, date, hours, minutes) const pastDate = new Date(pastYear, month, date, hours, minutes) const TimestampDefault = (props) => { return ( <div> <Timestamp timestamp={todaysDate} /> <br /> <Timestamp timestamp={futureDate} /> <br /> <Timestamp timestamp={pastDate} /> </div> ) } export default TimestampDefault
The showDate/show_date prop is set to true by default but can be set to false to hide the date.
The showTime/show_time prop is set to true by default but can be set to false to hide the time.
import React from 'react' import { Timestamp } from 'playbook-ui' const todaysDate = new Date() const futureYear = new Date().getFullYear() + 4 const pastYear = new Date().getFullYear() - 1 const month = new Date().getMonth() const date = new Date().getDate() const hours = new Date().getHours() const minutes = new Date().getMinutes() const futureDate = new Date(futureYear, month, date, hours, minutes) const pastDate = new Date(pastYear, month, date, hours, minutes) const TimestampShowTime = (props) => { return ( <div> <Timestamp align="left" showTime={false} timestamp={todaysDate} /> <br /> <Timestamp align="left" showTime={false} timestamp={futureDate} /> <br /> <Timestamp align="left" showTime={false} timestamp={pastDate} /> </div> ) } export default TimestampShowTime
Use the showCurrentYear/show_current_year prop to show the year even if it is the current year. This is set to false by default.
import React from 'react' import { Timestamp } from 'playbook-ui' const TimestampShowCurrentYear = (props) => { return ( <div> <Timestamp showCurrentYear timestamp={new Date()} /> <br /> <Timestamp showCurrentYear showTime={false} timestamp={new Date()} /> </div> ) } export default TimestampShowCurrentYear
The showTimezone/show_timezone prop can be used to show the timezone as well. This is set to false by default. NOTE: This prop must be used in conjunction with the timezone prop to specify which timezone to display.
import React from 'react' import { Timestamp } from 'playbook-ui' const todaysDate = new Date() const futureYear = new Date().getFullYear() + 4 const pastYear = new Date().getFullYear() - 1 const month = new Date().getMonth() const date = new Date().getDate() const hours = new Date().getHours() const minutes = new Date().getMinutes() const futureDate = new Date(futureYear, month, date, hours, minutes) const pastDate = new Date(pastYear, month, date, hours, minutes) const TimestampTimezones = (props) => { return ( <div> <Timestamp showDate={false} showTimezone timestamp={todaysDate} timezone="America/New_York" /> <br /> <Timestamp showTimezone timestamp={todaysDate} timezone="America/New_York" /> <br /> <Timestamp showTimezone timestamp={futureDate} timezone="America/New_York" /> <br /> <Timestamp showTimezone timestamp={pastDate} timezone="America/New_York" /> <br /> <Timestamp showDate={false} showTimezone timestamp={todaysDate} timezone="Asia/Hong_Kong" /> <br /> <Timestamp showTimezone timestamp={todaysDate} timezone="Asia/Hong_Kong" /> <br /> <Timestamp showTimezone timestamp={futureDate} timezone="Asia/Hong_Kong" /> <br /> <Timestamp showTimezone timestamp={pastDate} timezone="Asia/Hong_Kong" /> </div> ) } export default TimestampTimezones
The align prop can be used to set alignment. This prop is set to 'left' by default.
import React from 'react' import { Timestamp } from 'playbook-ui' const todaysDate = new Date() const futureYear = new Date().getFullYear() + 4 const pastYear = new Date().getFullYear() - 1 const month = new Date().getMonth() const date = new Date().getDate() const hours = new Date().getHours() const minutes = new Date().getMinutes() const futureDate = new Date(futureYear, month, date, hours, minutes) const pastDate = new Date(pastYear, month, date, hours, minutes) const TimestampAlign = (props) => { return ( <div> <Timestamp align="left" showDate={false} timestamp={todaysDate} /> <br /> <Timestamp align="left" timestamp={todaysDate} /> <br /> <Timestamp align="left" timestamp={futureDate} /> <br /> <Timestamp align="left" timestamp={pastDate} /> <br /> <br /> <Timestamp align="center" showDate={false} timestamp={todaysDate} /> <br /> <Timestamp align="center" timestamp={todaysDate} /> <br /> <Timestamp align="center" timestamp={futureDate} /> <br /> <Timestamp align="center" timestamp={pastDate} /> <br /> <br /> <Timestamp align="right" showDate={false} timestamp={todaysDate} /> <br /> <Timestamp align="right" timestamp={todaysDate} /> <br /> <Timestamp align="right" timestamp={futureDate} /> <br /> <Timestamp align="right" timestamp={pastDate} /> </div> ) } export default TimestampAlign
Use variant elapsed to show time ago. This variant can be customized in several ways:
Use the optional showUser/show_user prop to show user as part of the text. When showing the user, pass in the user name using the text prop as shown. showUser/show_user is set to false by default.
Use the optional hideUpdated/hide_updated prop to hide the 'Last updated' text if needed.
import React from 'react' import { Timestamp } from 'playbook-ui' const todaysDate = new Date() const year = new Date().getFullYear() const month = new Date().getMonth() const date = new Date().getDate() const hours = new Date().getHours() - 10 const minutes = new Date().getMinutes() const customDate = new Date(year, month, date, hours, minutes) const TimestampElapsed = (props) => { return ( <div> <Timestamp showUser text="Maricris Nonato" timestamp={todaysDate} variant="elapsed" /> <br /> <Timestamp timestamp={customDate} variant="elapsed" /> <br /> <Timestamp hideUpdated timestamp={customDate} variant="elapsed" /> </div> ) } export default TimestampElapsed
Use variant updated to show last updated at timestamp.
This variant can be customized using the optional showUser/show_user prop to show user as part of the text. When showing the user, pass in the user name using the text prop as shown.
showUser/show_user is set to false by default.
import React from 'react' import { Timestamp } from 'playbook-ui' const todaysDate = new Date() const TimestampUpdated = (props) => { return ( <div> <Timestamp showUser text="Maricris Nonato" timestamp={todaysDate} variant="updated" /> <br /> <Timestamp timestamp={todaysDate} variant="updated" /> </div> ) } export default TimestampUpdated
The updated variant can also be used in conjunction with the showCurrentYear/show_current_year prop to show the year even if it is the current year.
import React from 'react' import { Timestamp } from 'playbook-ui' const todaysDate = new Date() const TimestampUpdatedShowCurrentYear = (props) => { return ( <div> <Timestamp showCurrentYear showUser text="Maricris Nonato" timestamp={todaysDate} variant="updated" /> <br /> <Timestamp showCurrentYear timestamp={todaysDate} variant="updated" /> </div> ) } export default TimestampUpdatedShowCurrentYear
The updated variant can also be used in conjunction with the showDate/show_date prop. This prop is set to true by default but can be set to false to hide the date.
import React from 'react' import { Timestamp } from 'playbook-ui' const todaysDate = new Date() const TimestampUpdatedShowDate = (props) => { return ( <div> <Timestamp showDate={false} showUser text="Maricris Nonato" timestamp={todaysDate} variant="updated" /> <br /> <Timestamp showDate={false} timestamp={todaysDate} variant="updated" /> </div> ) } export default TimestampUpdatedShowDate
The updated variant can also be used in conjunction with the showTime/show_time prop. This prop is set to true by default but can be set to false to hide the time. This can also be used in conjunction with showCurrentYear/show_current_year to show the year even if it is the current year.
import React from 'react' import { Timestamp } from 'playbook-ui' const todaysDate = new Date() const TimestampUpdatedShowTime = (props) => { return ( <div> <Timestamp showTime={false} showUser text="Maricris Nonato" timestamp={todaysDate} variant="updated" /> <br /> <Timestamp showTime={false} timestamp={todaysDate} variant="updated" /> <br /> <Timestamp showCurrentYear showTime={false} timestamp={todaysDate} variant="updated" /> </div> ) } export default TimestampUpdatedShowTime
For alternative typography styles, you can pass a boolean prop called unstyled to the Timestamp kit and wrap it in any of our typography kits (Title, Body, etc.). This will allow the Timestamp kit to inherit any of our typography styles.
import React from 'react' import { Caption, Timestamp, Title } from 'playbook-ui' const TimestampUnstyled = (props) => { return ( <> <Caption size="xs" text="Basic unstyled example" /> <Timestamp timestamp={new Date()} unstyled /> <br /> <Caption size="xs" text="Example with wrapping typography kit" /> <Title size={1}> <Timestamp timestamp={new Date()} unstyled /> </Title> </> ) } export default TimestampUnstyled
Leave the text style as is. Don’t use timestamps to display important or sensitive time information.