Date Range Inline

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

Summary

Default

VStack(alignment: .leading, spacing: Spacing.large) {
  VStack(alignment: .leading, spacing: Spacing.small) {
    PBDateRangeInline(
      size: .caption,
      iconSize: .xSmall,
      startDate: "18 Jun 2013",
      endDate: "20 Mar 2015",
      startVariant: .standard
    )
    PBDateRangeInline(
      size: .body, 
      iconSize: .x1,
      startDate: "18 Jun 2013",
      endDate: "20 Mar 2015",
      startVariant: .standard
    )
  }
  .frame(maxWidth: .infinity, alignment: .leading)
  VStack(alignment: .center, spacing: Spacing.small) {
    PBDateRangeInline(
      size: .caption, 
      iconSize: .xSmall,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
    PBDateRangeInline(
      size: .body, 
      iconSize: .x1,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
  }
  .frame(maxWidth: .infinity, alignment: .center)
  VStack(alignment: .trailing, spacing: Spacing.small) {
    PBDateRangeInline(
      size: .caption, 
      iconSize: .xSmall,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
    PBDateRangeInline(
      size: .body, 
      iconSize: .x1,
      startDate: "15 Jan 2013",
      endDate: "15 Aug 2015",
      startVariant: .short(showIcon: true),
      endVariant: .short(showIcon: false)
    )
  }
  .frame(maxWidth: .infinity, alignment: .trailing)
}

Props

Name	Type	Description	Default	Values
date	`Date`	Sets the date	`Date()`
size	`PBFont`	Sets the font size	`.body`	`.body` `.caption` `.subcaption`
iconSize	`PBIcon.IconSize`	Sets the icon size	`.xSmall`	`xSmall` `small` `large` `x1`
startDate	`String`	Takes a string value to set the starting date range value
endDate	`String`	Takes a string value to set the ending date range value
startVariant	`PBDate.Variant`	Changes the style of the starting date	`.standard`	`.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)`
endVariant	`PBDate.Variant`	Changes the style of the ending date	`.standard`	`.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)`
isArrowIconBold	`Bool`	Determines if the date range arrow is bold	`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