@terminus/ui-date-range
v4.0.0
Published
<h1>Date Range</h1>
Downloads
32
Keywords
Readme
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-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 form control:
<form [formGroup]="myForm" novalidate>
<ts-date-range [dateFormGroup]="myForm.get('dateRange')"></ts-date-range>
<button (click)="submit(myForm.value)">Submit</button>
</form>myForm: FormGroup = this.formBuilder.group({
// Showing a nested example since usually a date range would be nested in a group
dateRange: this.formBuilder.group({
startDate: [ // This control MUST be named `startDate`
new Date(2017, 4, 6),
],
endDate: [ // This MUST be named `endDate`
new Date(2017, 4, 8),
],
}),
});NOTE: The keys inside the formGroup passed to the dateFormGroup input must be named
startDate and endDate. (see example directly above)
NOTE: If using a form with nested form groups, each group must be created with
formBuilder.group for the form get control to work:
// Notice the nested `dateRange` object without using `.group`
myForm: FormGroup = this.formBuilder.group({
dateRange: {
startDate: [
new Date(2017, 4, 6),
],
endDate: [
new Date(2017, 4, 8),
],
},
});
// THIS WILL FAIL!
const range = myForm.get('dateRange');
//////////////////////////////////////////////////
// Notice the nested `dateRange` object IS using `.group`
myForm: FormGroup = this.formBuilder.group({
dateRange: this.formBuilder.group({
startDate: [
new Date(2017, 4, 6),
[
Validators.required,
],
],
endDate: [
new Date(2017, 4, 8),
[
Validators.required,
],
],
}),
});
// Now there is a group for us to 'get'
const range = myForm.get('dateRange');Event driven
There are three selection events that you can tie into:
<ts-date-range
(startSelected)="myMethod($event)"
(endSelected)="myMethod($event)"
(dateRangeChange)="myMethod($event)"
></ts-date-range>startSelectedis fired when a start date is selected.endSelectedis fired when an end date is selected.dateRangeChangeis fired when the date range changes.
Date range boundaries
To define bounds for date selection, pass in a valid Date to each of these @Inputs:
endMaxDateendMinDatestartMaxDatestartMinDate
<ts-date-range
[startMinDate]="startDate1"
[startMaxDate]="startDate2"
[endMinDate]="endDate1"
[endMaxDate]="endDate2"
></ts-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;Disabling
Disable a control
Controls can be enabled or disabled via the associated form control:
myForm: FormGroup = this.formBuilder.group({
dateRange: this.formBuilder.group({
startDate: [
{
value: new Date(2017, 4, 6),
disabled: true,
},
],
endDate: [
new Date(2017, 4, 8),
],
}),
});
// Enable it at any time:
const ctrl = this.myForm.get('dateRange.startDate')
if (ctr) {
ctrl.enable();
}Disable the component
The entire component can be disabled:
<ts-date-range [isDisabled]="true"></ts-date-range>Default open
The start or end date datepicker can be opened on load:
<ts-date-range [defaultStartDatepickerOpen]="true"></ts-date-range>
<!-- or -->
<ts-date-range [defaultEndDatepickerOpen]="true"></ts-date-range>Error message
A custom error message can be displayed:
<ts-date-range errorMessage="My error message!"></ts-date-range>Test Helpers
Some helpers are exposed to assist with testing. These are imported from @terminus/ui-date-range/testing;
| Function |
|--------------------------|
| createDateRangeGroup |
| getDebugRangeInputs |
| getRangeInputInstances |
| getRangeInputElements |