Date Time

Date Time is a composite kit that leverages the Date and Time kits. The Date Time kit is affected by time zones and defaults to "America/New_York".

Default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateTime(
    dateVariant: .dayDate(showYear: true),
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    timeZoneIdentifier: "EST"
  )
  PBDateTime(
    dateVariant: .dayDate(showYear: false),
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z"
  )
  PBDateTime(
    dateVariant: .short(showIcon: false),
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z",
    showIcon: true
  )
  PBDateTime(
    dateVariant: .standard,
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    showTimeZone: true,
    timeZoneIdentifier: "GMT+9"
  )
}

Alignment

VStack(spacing: Spacing.small) {
  HStack {
    PBDateTime(
      dateVariant: .short(showIcon: false),
      timeVariant: .iconTimeZone,
      isLowercase: true,
      isTimeBold: true,
      zone: .utc,
      showTimeZone: true,
      timeZoneIdentifier: "2012-08-02T17:49:29Z"
    )
  }
  .frame(maxWidth: .infinity, alignment: .leading)
    PBDateTime(
        dateVariant: .short(showIcon: false),
        timeVariant: .iconTimeZone,
        isLowercase: true,
        isTimeBold: true,
        zone: .utc,
        showTimeZone: true,
        timeZoneIdentifier: "2012-08-02T17:49:29Z"
      )
  HStack {
    PBDateTime(
      dateVariant: .short(showIcon: false),
      timeVariant: .iconTimeZone,
      isLowercase: true,
      isTimeBold: true,
      zone: .utc,
      showTimeZone: true,
      timeZoneIdentifier: "2012-08-02T17:49:29Z"
    )
  }
  .frame(maxWidth: .infinity, alignment: .trailing)
}

Size

VStack(alignment: .leading, spacing: Spacing.xSmall) {
  PBDateTime(
    dateVariant: .dayDate(showYear: false), 
    timeVariant: .iconTimeZone,
    fontSize: .caption,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z",
    showIcon: true
  )
  PBDateTime(
    dateVariant: .dayDate(showYear: false),
    timeVariant: .iconTimeZone,
    fontSize: .caption,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z"
  )
  PBDateTime(
    dateVariant: .short(showIcon: false),
    timeVariant: .iconTimeZone,
    fontSize: .caption,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z",
    showIcon: true
  )
  PBDateTime(
    dateVariant: .short(showIcon: false),
    timeVariant: .iconTimeZone,
    fontSize: .caption,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z"
  )
  Spacer()
  PBDateTime(
    dateVariant: .dayDate(showYear: false),
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z",
    showIcon: true
  )
  PBDateTime(
    dateVariant: .dayDate(showYear: false),
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z"
  )
  PBDateTime(
    dateVariant: .short(showIcon: false),
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z",
    showIcon: true
  )
  PBDateTime(
    dateVariant: .short(showIcon: false),
    timeVariant: .iconTimeZone,
    isLowercase: true,
    isTimeBold: true,
    zone: .utc,
    showTimeZone: true,
    timeZoneIdentifier: "2012-08-02T17:49:29Z"
  )
}

Props

Name	Type	Description	Default	Values
dateTime	`Date`	Sets current date.
iconSize	`PBIcon.IconSize`	Allows user to change the size of the clock icon.	`.x3`	`.small` `.medium` `.large`
dateVariant	`PBDate.Variant`	Allows user to choose how they would like the date to be displayed	`.dayDate(showYear: false)`	`.short` `.dayDate(showYear: false)` `.standard` `.withIcon(isStandard: true)` `.withIcon(isStandard: false)`
timeVariant	`PBTime.Variant`	Allows user to choose how they would like the time to be displayed	`.time`	`.time` `.clockIcon` `.timeZone` `.iconTimeZone` `.withTimeZoneHeader`
fontSize	`PBFont`	Allows user to change the size of the text	`.caption`	`.subcaption` `.caption` `.body`
isLowercase	`Bool`	Determines whether or not am/pm is capitalized	`false`	`true` `false`
isTimeBold	`Bool`	Determines whether or not the time is bold	`false`	`true` `false`
isTimeZoneBold	`Bool`	Determines whether or not the time zone is bold	`false`	`true` `false`
zone	`PBTime.Zones`	Allows the user to set the time zone	`.east`	`.east` `.central` `.mountain` `.pacific` `.gmt`
showTimeZone	`Bool`	Determines whether or not the time zone is displayed	`false`	`true` `false`
timeZoneIdentifier	`String`	String that the time kit utilizes to calculate the current time and time zone
showIcon	`Bool`	Determines whether or not the clock icon is displayed	`false`	`true` `false`

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