Date Range Stacked

Summary

Default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBDateRangeStacked(
    startDate: Date().makeDate(year: 2019, month: 6, day: 18),
    endDate: Date().makeDate(year: 2020, month: 3, day: 20),
    startAlignment: .trailing,
    endAlignment: .leading,
    startVariant: .short(showIcon: false),
    endVariant: .short(showIcon: false)
  )
}

Props

Name	Type	Description	Default	Values
startDate	`Date()`	Takes a string value to set the starting date range value	`Date()`
endDate	`Date()`	Takes a string value to set the ending date range value	`Date()`
startAlignment	`Alignment`	Changes the alignment of the starting date	`.leading`	`.leading` `.trailing`
endAlignment	`Alignment`	Changes the alignment of the ending date	`.leading`	`.leading` `.trailing`
startVariant	`PBDate.Variant`	Changes the style of the starting date	`.short(showIcon: false)`	`.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)`
endVariant	`PBDate.Variant`	Changes the style of the ending date	`.short(showIcon: false)`	`.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: 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