Date

Use to display the date. Year will not display if it is the current year.

DateTime defaults to the "America/New_York" timezone. Date ignores timezone.

Please note: this kit could potentially change the dates on you!

This is because the Javascript Date class does not have the concept of a date without time. If you pass a Ruby Date string to JavaScript, you will receive a date and a time which makes use of the timezone it infers from your browser based on your virtual geolocation or custom browser settings.

For example, if you pass a date like "7/2/2022" and your browser is on London time, Javascript will convert this to "7/2/2022 at 0:00 BST".

Subsequently, if you have not passed in a timezone to this kit, it will convert that time into US Eastern Time (default), making the resulting date and time "7/1/2022 at 19:00 EST". In this case the expected July 2 date will now be presented as July 1.

See this kit in action in our sample UI

Default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDate(
    Date(),
    variant: .short
  )
  PBDate(
    Date().makeDate(year: 2012, month: 8, day: 3),
    variant: .standard
  )
  PBDate(
    Date().makeDate(year: 2017, month: 12, day: 3),
    variant: .dayDate(showYear: true)
  )
  Spacer()
  PBDate(
    Date(),
    variant: .short, 
    typography: .title4
  )
  PBDate(
    Date().makeDate(year: 2012, month: 8, day: 3),
    variant: .standard, 
    typography: .title4
  )
  PBDate(
    Date().makeDate(year: 2017, month: 12, day: 3),
    variant: .dayDate(showYear: true),
    typography: .title4
  )
}

Variants


VStack(alignment: .leading, spacing: Spacing.small) {
  PBDate(Date(), variant: .withIcon(isStandard: true), typography: .caption, iconSize: .xSmall)
  PBDate(Date(), variant: .standard, typography: .title4)
  PBDate(Date(), variant: .withIcon(isStandard: true), typography: .title4, iconSize: .x1)
  PBDate(Date(), variant: .dayDate, typography: .title4)
  PBDate(Date(), variant: .withIcon(isStandard: false), typography: .title4, iconSize: .x1)
}

Alignment

 VStack(spacing: Spacing.small) {
  HStack {
    PBDate(
      Date().makeDate(year: 1995, month: 12, day: 25),
      variant: .standard,
      typography: .title4
    )
  }
  .frame(maxWidth: .infinity, alignment: .leading)
  HStack {
    PBDate(
      Date().makeDate(year: 2020, month: 12, day: 25),
      variant: .withIcon(isStandard: true),
      typography: .title4,
      iconSize: .x1
    )
  }
  .frame(maxWidth: .infinity, alignment: .center)
  HStack {
    PBDate(
    Date(),
    variant: .short,
    typography: .title4
   )
  }
  .frame(maxWidth: .infinity, alignment: .trailing)
}

Unstyled


VStack(alignment: .leading, spacing: Spacing.small) {
  PBDate(Date(), variant: .short, typography: .body)
  PBDate(Date(), variant: .standard, typography: .title1)
  PBDate(Date(), variant: .withIcon(isStandard: false), typography: .subcaption, iconSize: .xSmall)
}

Props

Name	Type	Description	Default	Values
datestamp	`Date`	Sets the date
variant	`Variant`	Changes the style	`.short`	`.short` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)`
typography	`PBFont`	Sets the font	`.caption`	`.title1` `.title2` `.title3` `.title4` `.body` `.buttonText` `.largeCaption` `.caption` `.subcaption` `.monogram` `.badgeText` `.detail`
iconSize	`PBIcon.IconSize`	Chances the icon's size	`.x1`	`xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10`
alignment	`Alignment`	Changes the alignment	`.leading`	`.leading` `.trailing`

UI Samples using Date Kit

Get the full picture. See how this kit is used in our samples.

Crm Client List

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat