@mat-ext/datetimepicker-moment
v6.0.0-beta-1
Published
This is the main branch for @angular/material 6.x.
Downloads
27
Readme
Material Datetimepicker for @angular/material 6.x
This is the main branch for @angular/material 6.x.
You can find the Angular 5 version on the 1.x
branch.
Description
The datetimepicker is taken from Promact/md2 and modified to use @angular/material as base and added theming support.
Like the @angular/material datepicker it contains a native-datetime-adapter as well as a moment-datetime-adapter.
Installation
Install:
yarn install @mat-ext/datetimepicker-core
And for the moment adapter:
yarn install @angular/material-moment-adapter
yarn install @mat-ext/datetimepicker-moment
Performing a local build
yarn install
yarn build
Using the local build in some project
cd my-project
Add the dependencies to your package.json
:
"dependencies": {
"@mat-ext/datetimepicker-core": "2.0.0",
"@mat-ext/datetimepicker-moment": "2.0.0",
}
Link the local built modules:
yarn link "@mat-ext/datetimepicker-core"
yarn link "@mat-ext/datetimepicker-moment"
Import & configuration
Basically the same way the @angular/material datepicker is configured and imported.
imports: [
...
MatDatepickerModule,
// use this if you want to use native javascript dates and INTL API if available
// MatNativeDatetimeModule,
MatMomentDatetimeModule,
MatDatetimepickerModule
]
Usage
<form [formGroup]="group">
<mat-form-field>
<mat-placeholder>Start DateTime</mat-placeholder>
<mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
<mat-datetimepicker #datetimePicker type="datetime" openOnFocus="true" timeInterval="5"></mat-datetimepicker>
<input matInput formControlName="start" [matDatetimepicker]="datetimePicker" required autocomplete="false">
</mat-form-field>
</form>
Theming
@import '~@mat-ext/datetimepicker-core/datetimepicker/datetimepicker-theme.scss';
// Using the $theme variable from the pre-built theme you can call the theming function
@include mat-datetimepicker-theme($theme);
@see src/styles.scss