Awesome Open Source
Awesome Open Source

MatDatepickerTimeHeader

Check out the Demo

Install

npm i mat-datepicker-time-header

Usage

Add the module

import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDatepickerTimeHeaderModule } from 'mat-datepicker-time-header';

@NgModule({
  imports: [
    MatNativeDateModule,
    MatDatepickerModule,
    // the module for this lib
    MatDatepickerTimeHeaderModule
  ],
  entryComponents: [
    // if you get an error, you may need to add the component to the entryComponents array
    MatDatepickerTimeHeaderComponent
  ]
})

In order for the input to work, you must add a control with the name time to a formGroup, and add the formGroup on one of the parents of the datepicker. Otherwise it will just throw an error. The cotrol name can optionaly be configured.

in component.ts

Create a formGroup with a time control

form = new FormGroup({ date: new FormControl(), time: new FormControl() });

Create a referance to the MatDatepickerTimeHeaderComponent

import { MatDatepickerTimeHeaderComponent } from "mat-datepicker-time-header";
timeHeader = MatDatepickerTimeHeaderComponent;

in component.html

Create a form and place the picker into it

<form [formGroup]="form">
  <mat-form-field appearance="fill">
    <mat-label>Custom calendar header</mat-label>
    <input formControlName="date" matInput [matDatepicker]="picker" />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</form>

Add the custom heaser to the datepicker

<mat-datepicker #picker [calendarHeaderComponent]="timeHeader"></mat-datepicker>

Optional control name configuration

By default, the time input will search for a parent formGroup and attach itself to the control with the name time, the control name can optionaly be changed by providing the control name.

import { MAT_DATEPICKER_TIME_CONTROL_NAME } from "mat-datepicker-time-header";

providers: [
  { provide: MAT_DATEPICKER_TIME_CONTROL_NAME, useValue: "event_time" },
  // now it will attach to "event_time" instead
];

Current Limitations

  • No support for template driven forms
  • Date range picker not supported yet (no place in the header).

Pull requests welcome


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (263,621
Component (4,563
Material (1,579
Datepicker (630
Picker (590
Header (413
Timepicker (160
Calander (9
Formgroup (8
Related Projects