Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@danielzach/ng-mat-datetimepicker

danielzach6MIT1.0.3TypeScript support: included

Angular Material Datetimepicker

material, datetimepicker

readme

Material DatePicker by @https://github.com/danielzach/ng-mat-datetimepicker

Fork of the official Material Datepicker for Angular v6 with timepicker support.

The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar.
It is made up of several components and directives that work together.

Further documentation can be found at the official docs: https://material.angular.io/components/datepicker/overview

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

The mat-datepicker has the following input parameters:

  • startAt: start Date/Moment, otherwise the current selected value
  • type: date | datetime | time output type and available views. default: date
  • startView: clock | month | year | years initial view to load. default: month
  • clockStep: interval to use in the clock view. default: 1
  • twelveHour: whether to use 12 or 24 hrs format. default: false
  • touchUi: calendar UI mode. default: true (recommended)
  • disabled: whether the datepicker pop-up should be disabled
  • matDatepicker: whether the datepicker is connected to a date type one

and the input[matDatepicker] has the output:

  • dateChange: Emits when a change event is fired on this <input>.
  • dateInput: Emits when a input event is fired on this <input>.

Installation

As usual run yarn add @https://github.com/danielzach/ng-mat-datetimepicker or npm install @https://github.com/danielzach/ng-mat-datetimepicker.
This module requires moment and moment-timezone for the MomentDateAdapter.

Now add the modules to your Angular Module:

import { MatDatepickerModule, MatMomentDateModule } from '@https://github.com/danielzach/ng-mat-datetimepicker';

@NgModule({
  imports: [
    MatDatepickerModule,
    MatMomentDateModule,
    ...
  ],
  ...
})
export class AppModule {}

Note that the MatDatepickerModule can be loaded into feature modules,
but it requires the providers given by MatMomentDateModule,
so it's recommended to be imported in your root Module.

Styling

This module supports the Angular Material prebuilt themes that can be included in angular.json:

"styles": [
  "node_modules/@https://github.com/danielzach/ng-mat-datetimepicker/prebuilt-themes/indigo-pink.css",
  ...
],

available themes are deeppurple-amber, indigo-pink, pink-bluegrey and purple-green.

You can use your customized Material Theme as usual:

@import '~@https://github.com/danielzach/ng-mat-datetimepicker/theming';

@include mat-datepicker-theme($theme);

Also, the primary color can be customized with CSS variables. The required ones are:

body {
  --bg-dialog: white;
  --primary: rgba(73, 200, 242, 1);
  --primary-contrast: #fff;
  --primary-a60: rgba(73, 200, 242, 0.6);
  --primary-a80: rgba(73, 200, 242, 0.8);
}

Date Formats Customization

This fork uses an extended set of DateFormats,
so please check this file if you're building your own.

Usage Examples

DateTime picker (year, month, date and clock views)

<mat-datepicker type="datetime" clockStep="5" #pickerStart></mat-datepicker>

DateTime picker (starting on the clock view)

<mat-datepicker type="datetime" startView="clock" #startPicker></mat-datepicker>

Time picker (clock views, with 5 minutes jump)

<mat-datepicker type="time" clockStep="5" #timeStart></mat-datepicker>

Enjoy!

changelog

Change Log

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

1.0.2 (2020-04-07)

1.0.1 (2020-04-06)

0.9.5 (2018-07-02)

Bug Fixes

  • avoid font-size conflicts with the datepicker controls. Closes #12 (2d06771)

0.9.0 (2018-06-13)

Bug Fixes

  • README note for theming, fixes #2 (0d8de37)

Features

  • lib: created ng lib for the datepicker (ade96cb)
  • sync with the latest Angular Material 6 Module (a835916)

0.8.3 (2018-02-26)

Bug Fixes

  • core barrel fixed for ngc (3ed2596)

0.8.2 (2018-02-26)

Bug Fixes

  • release process with standard-version fixed (11810f3)

0.8.1 (2018-02-25)

Bug Fixes

  • encountered undefined provider! (594d2ea)

0.8.0 (2018-02-24)

Bug Fixes

  • scss: style bundling included in the dist package (7bed6bd)
  • barrels corrected for ngc (961dc05)
  • removing secondary packages from the prepublish script (51ff7dc)
  • initializing values for AoT (b67d123)
  • sync material/core exports (da9c5ca)
  • prepublish script synced (ac0b216)
  • clock-view primary color instead palette usage (c370f11)
  • calendar-body cell value display fixed (1e735db)
  • moment namespace added for rollup to work (c58b14b)
  • ng-packager config updated (ad05c94)

0.2.0 (2018-01-14)

Features