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 valuetype
:date | datetime | time
output type and available views. default: datestartView
:clock | month | year | years
initial view to load. default: monthclockStep
: interval to use in the clock view. default: 1twelveHour
: whether to use 12 or 24 hrs format. default: falsetouchUi
: calendar UI mode. default: true (recommended)disabled
: whether the datepicker pop-up should be disabledmatDatepicker
: whether the datepicker is connected to a date type one
and the input[matDatepicker]
has the output:
dateChange
: Emits when achange
event is fired on this<input>
.dateInput
: Emits when ainput
event is fired on this<input>
.
As usual run yarn add @coachcare/datepicker
or npm install @coachcare/datepicker
.
This module requires moment
and moment-timezone
for the MomentDateAdapter.
Now add the modules to your Angular Module:
import { MatDatepickerModule, MatMomentDateModule } from '@coachcare/datepicker';
@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.
This module supports the Angular Material prebuilt themes that can be included in angular.json
:
"styles": [
"node_modules/@coachcare/datepicker/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 '~@coachcare/datepicker/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);
}
This fork uses an extended set of DateFormats,
so please check this file if you're building your own.
<mat-datepicker type="datetime" clockStep="5" #pickerStart></mat-datepicker>
<mat-datepicker type="datetime" startView="clock" #startPicker></mat-datepicker>
<mat-datepicker type="time" clockStep="5" #timeStart></mat-datepicker>
Feedback and suggestions are welcome, also gratitude demonstrations :) https://www.paypal.me/mateotp
Enjoy!