Date Range Picker Component

Overview

The date range picker component provides you a simple prompt control for the purpose of choosing a range of date or date time values. Several range types exist, including less than, greater than, between and not between allowing many filtering options in your MPages.

Required Imports

To use the input component , you must import the MpageDateRangePickerComponent and IDateRange from @clinicaloffice/mpage-developer and the FormsModule from @angular/forms. You must also include them in your component imports array in your component TypeScript file.

e.g. your-component.ts

import {MpageDateRangePickerComponent, IDateRange} from '@clinicaloffice/mpage-developer';
import {FormsModule} from '@angular/forms';

@Component({
  selector: 'your-component',
    imports: [MpageDateRangePickerComponent, IDateRange, FormsModule],
  templateUrl: './your-component.component.html',
  styleUrl: './your-component.component.scss',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

Usage

The MPage input component HTML selector is called <mpage-date-range-picker/> and at a minimum requires a bound IDateRange variable. The component will size itself to the full width of its parent container unless CSS styling is applied to the component.

It is recommended that you always add a label to identify your input field as follows.

<mpage-date-range-picker [(ngModel)]="dateRange" label="Result Date" />

The model for the date range picker component uses an IDateRange object. This can be a simple variable object or an Angular signal.

protected dateRange: IDateRange = { range: '', fromDate: new Date(), toDate: new Date() };

Options

Several options exist for the date range picker component as described in the following table

Range Types

The default rangeTypes include every possibility for date ranges you may need in your MPages. The code snippet shown below demonstrates all range types available.

[
    {key: 'none', value: 'No Filtering'},
    {key: '<', value: 'Less Than (<)'},
    {key: '<=', value: 'Less Than or Equal To (<=)'},
    {key: '>', value: 'Greater Than (>)'},
    {key: '>=', value: 'Greater Than or Equal To (>=)'},
    {key: 'between', value: 'Between'},
    {key: 'notbetween', value: 'Not Between'}
]

During the development of your MPage, you may wish to control the range types available. A common example would be a date prompt where you want to see values between two dates. You can easily accomplish this by passing a new list of ranges types to the component.

<mpage-date-range-picker [(ngModel)]="dateRange" label="Registration Date Range" [rangeTypes]="[{key: 'between', value: 'Between'}]" />

In the example above, we only passed one range type in the array. Doing this sets the range type to this value and eliminates the range type prompt inside the component.

Working With Your Results

The date range picker makes no assumptions on how you use the final result. The model IDateRange object will contain the range value that matches the keys described in the range types above, where the fromDate and toDate contain JavaScript date/time values.

Interfaces

IDateRange {
  range: string;
  fromDate: Date;
  toDate: Date;
}