4.0.0 • Published 3 years ago

@terminus/ui-date-range v4.0.0

Weekly downloads
24
License
MIT
Repository
github
Last release
3 years ago

CI/CD Status Codecov MIT License
NPM version Library size

Table of Contents

Installation

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-date-range

CSS 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>
  1. startSelected is fired when a start date is selected.
  2. endSelected is fired when an end date is selected.
  3. dateRangeChange is 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:

  1. endMaxDate
  2. endMinDate
  3. startMaxDate
  4. startMinDate
<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
tslib@angular-devkit/schematics@schematics/angular
@infinitebrahmanuniverse/nolb-_ter@zalastax/nolb-_ter@everything-registry/sub-chunk-905
4.0.0

3 years ago

3.0.0

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.1

4 years ago

1.1.2

4 years ago

1.1.0

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.0.1

4 years ago