Issue: While using directives from ng-matero for DateTime with Angular Material for application design, the dateTimepicker element is not applying the angular material theme as desired. https://i.sstatic.net/zPBp3.png
Code Example The app.module.ts file includes the following code:
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module';
import { SearchComponent } from './components/search/search.component';
import { JourneysListComponent } from './components/journeys-list/journeys-list.component';
import { FlexLayoutModule } from '@angular/flex-layout';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MtxDatetimepickerModule } from '@ng-matero/extensions/datetimepicker';
import { MtxNativeDatetimeModule } from '@ng-matero/extensions/core';
@NgModule({
declarations: [
AppComponent,
SearchComponent,
JourneysListComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
MaterialModule,
FlexLayoutModule,
BrowserAnimationsModule,
MtxDatetimepickerModule,
MtxNativeDatetimeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
HTML Snippet
<div class="login-wrapper" fxLayout="row" fxLayoutAlign="center center">
<mat-card class="box">
<mat-card-header>
<mat-card-title>Planner</mat-card-title>
</mat-card-header>
<form class="example-form">
<mat-card-content>
<mat-form-field class="example-full-width">
<input matInput placeholder="Origin" matInput required>
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="Destination" matInput required>
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-placeholder>Date & Time</mat-placeholder>
<mtx-datetimepicker #datetimePicker
[type]="type"
[mode]="mode"
[multiYearSelector]="multiYearSelector"
[startView]="startView"
[twelvehour]="twelvehour"
[timeInterval]="timeInterval"
[touchUi]="touchUi"
[timeInput]="timeInput"></mtx-datetimepicker>
<input [mtxDatetimepicker]="datetimePicker" [formControl]="datetime" matInput required>
<mtx-datetimepicker-toggle [for]="datetimePicker" matSuffix></mtx-datetimepicker-toggle>
</mat-form-field>
</mat-card-content>
<button mat-stroked-button color="accent" class="btn-block">Search</button>
</form>
</mat-card>
</div>
TypeScript (TS) Section
import { Component, OnInit } from '@angular/core';
import {MtxCalendarView,MtxDatetimepickerMode,MtxDatetimepickerType} from '@ng-matero/extensions/datetimepicker';
import { MTX_DATETIME_FORMATS } from '@ng-matero/extensions/core';
import { UntypedFormControl } from '@angular/forms';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss'],
providers: [
{
provide: MTX_DATETIME_FORMATS,
useValue: {
parse: {
dateInput: 'YYYY-MM-DD',
monthInput: 'MMMM',
yearInput: 'YYYY',
timeInput: 'HH:mm',
datetimeInput: 'YYYY-MM-DD HH:mm',
},
display: {
dateInput: 'YYYY-MM-DD',
monthInput: 'MMMM',
yearInput: 'YYYY',
timeInput: 'HH:mm',
datetimeInput: 'YYYY-MM-DD HH:mm',
monthYearLabel: 'YYYY MMMM',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
popupHeaderDateLabel: 'MMM DD, ddd',
},
},
},
],
})
export class SearchComponent implements OnInit {
type: MtxDatetimepickerType = 'datetime';
mode: MtxDatetimepickerMode = 'auto';
startView: MtxCalendarView = 'month';
multiYearSelector = false;
touchUi = false;
twelvehour = false;
timeInterval = 1;
timeInput = true;
datetime = new UntypedFormControl();
constructor() { }
ngOnInit(): void {
}
}
Question:
Is it necessary to set a theme exclusively for mtx-datetimepicker? If yes, how can this be accomplished?