I am trying to use date format ‘YYYY-MM’DD’ in my date picker field. But the date picker only shows the default format date ‘MM-DD-YYYY’.
If I provide the provideMomentDateAdapter(MY_FORMATS) at the component level, it shows the date in correct format YYYY-MM-DD. But adding it globally shows it as MM-DD-YYYY.
Installed @angular/material-moment-adapter.
Here is my app.config.ts:
import { MatNativeDateModule, provideNativeDateAdapter } from '@angular/material/core';
import { provideMomentDateAdapter } from '@angular/material-moment-adapter';
// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
parse: {
dateInput: 'YYYY-MM-DD',
},
display: {
dateInput: 'YYYY-MM-DD',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
export const appConfig: ApplicationConfig = {
providers: [
// some other providers
importProvidersFrom(MatNativeDateModule),
provideMomentDateAdapter(MY_FORMATS),
]
};
Here is my component ts:
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatMomentDateModule, provideMomentDateAdapter } from "@angular/material-moment-adapter";
// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
// the `default as` syntax.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import { default as _rollupMoment } from 'moment';
const moment = _rollupMoment || _moment;
interface SharedLogForm {
logType: FormControl<logTypeIntfc>;
logDate: FormControl<_moment.Moment>;
logMode: FormControl<boolean>;
};
// export const MY_FORMATS = {
// parse: {
// dateInput: 'YYYY-MM-DD',
// },
// display: {
// dateInput: 'YYYY-MM-DD',
// monthYearLabel: 'MMM YYYY',
// dateA11yLabel: 'LL',
// monthYearA11yLabel: 'MMMM YYYY',
// },
// };
@Component({
selector: 'app-log-viewer',
standalone: true,
// providers: [
// // Moment can be provided globally to your app by adding `provideMomentDateAdapter`
// // to your app config. We provide it at the component level here, due to limitations
// // of our example generation script.
// provideMomentDateAdapter(MY_FORMATS),
// ],
imports: [ MatFormFieldModule, FormsModule, ReactiveFormsModule,
MatIconModule, MatCheckboxModule, MatSelectModule,
MatInputModule, MatButtonModule, MatTooltipModule,
CommonModule, MatDatepickerModule, MatNativeDateModule,
MatDatepickerModule, MatMomentDateModule ],
templateUrl: './log-viewer.component.html',
styleUrl: './log-viewer.component.scss'
})
export class LogViewerComponent {
logForm: FormGroup<SharedLogForm>;
constructor() {
// Display today's date in the date field.
this.logForm = new FormGroup<SharedLogForm>({
logType: new FormControl(this.logTypeArray[0], {nonNullable: true}),
logDate: new FormControl(moment(), {nonNullable: true}),
logMode: new FormControl(false, {nonNullable: true}),
});
}
Here is my component html:
<mat-form-field
appearance="outline"
color="primary"
floatLabel="always">
<mat-label>Choose Log date (UTC)</mat-label>
<input matInput
[matDatepicker]="picker"
formControlName="logDate"
matTooltip="Choose any date to see the logs.
By default, today's logs will be displayed.">
<mat-hint>YYYY-MM-DD</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>