@terminus/ui-cohort-date-range
v4.0.0
Published
<h1>Cohort Date Range</h1>
Downloads
16
Keywords
Readme
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-cohort-date-rangeCSS imports
In your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">Usage
Pass in the cohorts:
<ts-cohort-date-range [cohorts]="cohorts"></ts-cohort-date-range>cohorts: TsDateCohort[] = [
{
display: 'Last full year',
range: {
start: new Date(2018, 1, 1),
end: new Date(2018, 12, 31),
},
},
{
display: 'Last full month',
range: {
start: new Date(2019, 8, 1),
end: new Date(2019, 8, 31),
},
},
];The keys inside the passed in cohorts object must match the TsDateCohort interface:
{
active?: boolean;
display: string,
range: {
start: Date | string,
end: Date | string,
}
}Defaulting to a specific cohort
The first TsDateCohort that has the active key set to true will be selected by default.
cohorts: TsDateCohort[] = [
{
display: 'Last full year',
range: {
start: new Date(2018, 1, 1),
end: new Date(2018, 12, 31),
},
},
{
active: true, // Now this cohort will be selected on load!
display: 'Last full month',
range: {
start: new Date(2019, 8, 1),
end: new Date(2019, 8, 31),
},
},
];Event driven
Anytime the date range is changed, cohortDateRangeChanged is emitted.
<ts-cohort-date-range
[cohorts]="myCohorts"
(cohortDateRangeChanged)="printRange($event)"
></ts-cohort-date-range>allowCustomDates
When allowCustomDates is set to false, the date range is readonly (this defaults to true).
<ts-cohort-date-range
[allowCustomDates]="false"
[cohorts]="cohorts"
></ts-cohort-date-range>NOTE: When set to true, a Custom Dates option will be added to the dropdown.
Date range boundaries
To define bounds for custom date selection, pass in a valid Date to each of these @Inputs:
endMaxDateendMinDatestartMaxDatestartMinDate
<ts-cohort-date-range
[startMinDate]="startDate1"
[startMaxDate]="startDate2"
[endMinDate]="endDate1"
[endMaxDate]="endDate2"
></ts-cohort-date-range>startDate1 = new Date(2017, 1, 1);
startDate2 = new Date(2017, 8, 1);
endDate1 = new Date(2017, 1, 2);
endDate2 = new Date(2017, 8, 2;Disable
The entire component can be disabled:
<ts-cohort-date-range [isDisabled]="true"></ts-cohort-date-range>Error message
A custom error message can be displayed:
<ts-cohort-date-range errorMessage="My error message!"></ts-cohort-date-range>Test Helpers
Some helpers are exposed to assist with testing. These are imported from @terminus/ui-cohort-date-range/testing;
| Function |
|-------------------------|
| getFormFieldElement |
| getCohortDebugElement |