Date Picker Header

Angular Material DatePicker

The DatepickerHeaderComponent and DatepickerHeader2Component components are designed as a solution to a problem found with the Angular Material Datepicker component on Internet Explorer for some clients.

When using the standard Angular Material DatePicker without specifying a custom moment.js date picker header component, some clients experience abnormal behaviour with the DatePicker component. This abnormal behaviour appears as invisible buttons and strange visual artifacts on the DatePicker component.

To remedy the problem, we added references to the DateAdapter, MAT_DATE_FORMS, MAT_DATE_LOCAL to the GitHub MPage template project as well as defined the provider in app.module.ts. If you view your project app.module.ts file, you will see the following defined in the providers section.

{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
{
    provide: MAT_DATE_FORMATS, useValue: {
        parse: {
            dateInput: ['l', 'LL'],
        },
        display: {
            dateInput: 'MM-DD-YYYY',
            monthYearLabel: 'MMM YYYY',
            dateA11yLabel: 'LL',
            monthYearA11yLabel: 'MMMM YYYY',
        }
    }
}

You can change the values of dateInput and monthYearLabel to match your hospital standards. For example, switching the dateInput value to 'DD-MMM-YYYY' would show all dates in the Angular Material DatePicker component in the format of DD-MMM-YYYY. Changing the monthYearLabel affects how the month and year is displayed when the calendar control has been opened.

Clinical Office Date Picker Header

The Clinical Office Date Picker header is a simplified version of the date picker header. When your users open the calendar control, they will see a fast rewind button, rewind button, the month and year, forward button and fast-forward button as show below.

The outermost buttons (fast-rewind and fast-forward) skip a year on the calendar when clicked. The forward and rewind buttons skip a single month each time they are clicked. The calendar is controlled completely by the incoming date field allowing users the ability to enter earlier years without having click the fast buttons many times.

Clinical Office Date Picker Header 2

The Clinical Office Date Picker Header 2 is different from Date Picker Header in that instead of navigation buttons the user is presented with drop-down lists of the year and month. This allows for faster user navigation if multiple years are to be traversed (e.g. DOB).

Implementation

The component displaying the DatePicker control requires importing the DatepickerHeaderComponent from the Clinical Office package as well as initialization of a DatepickerHeaderComponent variable.

V4+ import { DatepickerHeaderComponent } from '@clinicaloffice/clinical-office-mpage-core';
< V3 import { DatepickerHeaderComponent } from '@clinicaloffice/clinical-office-mpage';

@Component({
  selector: 'app-your-component-name',
  templateUrl: './your-component-name.component.html'
})
export class YourComponentName implements OnInit {

    datePickerHeader = DatepickerHeaderComponent;

    ... rest of your code ...

The Angular Material DatePicker code in your .html template is almost identical to the standard setup described on the Angular Material DatePicker documentation with the exception that you need to assign the [calendarHeaderComponent] variable with the name of your DatepickerHeaderComponent variable (e.g. datePickerHeader)

An example of a form field variable called fromDate is shown below.

<mat-form-field>
    <mat-label>From Date</mat-label>
    <input matInput [matDatepicker]="datepickerFrom" formControlName="fromDate" (dateChange)="refreshInd = true">
    <mat-datepicker-toggle matSuffix [for]="datepickerFrom"></mat-datepicker-toggle>
    <mat-datepicker #datepickerFrom [calendarHeaderComponent]="datePickerHeader"></mat-datepicker>
</mat-form-field>

If you wish to create your own DatePicker Header, there is Documentation available on the Angular Material website.