Timestamp

This low profile kit displays time. Elapsed, current, future, or otherwise.

Default

Code Example

import React from 'react'
import Timestamp from '../_timestamp'

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
          align="left"
          showDate={false}
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={futureDate}
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={pastDate}
          {...props}
      />
    </div>
  )
}

export default TimestampDefault

Alignments

Code Example

import React from 'react'
import Timestamp from '../_timestamp'

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}
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={futureDate}
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={pastDate}
          {...props}
      />

      <br />
      <br />

      <Timestamp
          align="center"
          showDate={false}
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="center"
          showDate
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="center"
          showDate
          timestamp={futureDate}
          {...props}
      />

      <br />

      <Timestamp
          align="center"
          showDate
          timestamp={pastDate}
          {...props}
      />

      <br />
      <br />

      <Timestamp
          align="right"
          showDate={false}
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="right"
          showDate
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="right"
          showDate
          timestamp={futureDate}
          {...props}
      />

      <br />

      <Timestamp
          align="right"
          showDate
          timestamp={pastDate}
          {...props}
      />
    </div>
  )
}

export default TimestampAlign

Timezones

Code Example

import React from 'react'
import Timestamp from '../_timestamp'

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
          align="left"
          showDate={false}
          showTimezone
          timestamp={todaysDate}
          timezone="America/New_York"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={todaysDate}
          timezone="America/New_York"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={futureDate}
          timezone="America/New_York"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={pastDate}
          timezone="America/New_York"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate={false}
          showTimezone
          timestamp={todaysDate}
          timezone="Asia/Hong_Kong"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={todaysDate}
          timezone="Asia/Hong_Kong"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={futureDate}
          timezone="Asia/Hong_Kong"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={pastDate}
          timezone="Asia/Hong_Kong"
          {...props}
      />
    </div>
  )
}

export default TimestampTimezones

Last Updated by

Code Example

import React from 'react'
import Timestamp from '../_timestamp'

const todaysDate = new Date()

const TimestampUpdated = (props) => {
  return (
    <div>
      <Timestamp
          showUser
          text="Maricris Nonato"
          timestamp={todaysDate}
          variant="updated"
          {...props}
      />

      <br />

      <Timestamp
          showUser={false}
          timestamp={todaysDate}
          variant="updated"
          {...props}
      />
    </div>
  )
}

export default TimestampUpdated

Time Ago

Code Example

import React from 'react'
import Timestamp from '../_timestamp'

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"
          {...props}
      />

      <br />

      <Timestamp
          showUser={false}
          timestamp={customDate}
          variant="elapsed"
          {...props}
      />

      <br />

      <Timestamp
          hideUpdated
          showUser={false}
          timestamp={customDate}
          variant="elapsed"
          {...props}
      />
    </div>
  )
}

export default TimestampElapsed

Things To Avoid

Leave the text style as is. Don’t use timestamps to display important or sensitive time information.