install mement.js by running the following command
npm install moment --save
then install the following:
npm i @angular/material-moment-adapter
in your package.json under dependency add the following:
“@angular/material-moment-adapter”: “~8.2.2”,
Note: If you have trouble importing moment, try adding
"allowSyntheticDefaultImports": true in compilerOptions
in your tsconfig.json file and then use the syntaxImport the following in your component
import { Location } from ‘@angular/common’;
import { Component, OnInit } from ‘@angular/core’;
import { FormBuilder, FormControl, FormGroup, Validators, AbstractControl} from ‘@angular/forms’;
import { ActivatedRoute } from ‘@angular/router’;
//———services and models——–//
import { NewsfeedService} from ‘../../../services/newsfeed.service’;
import {LookupsService} from ‘../../../services/lookups.service’;
import {IStatus} from ‘../../../models/lookup.model’;
//———–date formater———————-//
// import { MatDatepickerInputEvent } from ‘@angular/material/datepicker’;
// import * as _moment from ‘moment’;
// import {default as _rollupMoment} from ‘moment’;
// const moment = _rollupMoment || _moment;
import {MomentDateAdapter} from ‘@angular/material-moment-adapter’;
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from ‘@angular/material/core’;
import * as _moment from ‘moment’;
// tslint:disable-next-line:no-duplicate-imports
import {default as _rollupMoment} from ‘moment’;
const moment = _rollupMoment || _moment;
export const MY_FORMATS = {
parse: {
dateInput: ‘LL’,
},
display: {
dateInput: ‘YYYY-MM-DD’,
monthYearLabel: ‘YYYY’,
dateA11yLabel: ‘LL’,
monthYearA11yLabel: ‘YYYY’,
},
};
@Component({
selector: ‘app-newsfeedform’,
templateUrl: ‘./newsfeedform.component.html’,
styleUrls: [‘./newsfeedform.component.css’],
providers: [
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
],
})
export class NewsfeedformComponent implements OnInit {
NewsfeedForm: FormGroup;
id: number;
data;
status;
editorStyle = {
height: ‘200px’
};
constructor(private _formBuilder: FormBuilder,
private activeRoute: ActivatedRoute,
private newsfeedService: NewsfeedService,
private lookupService:LookupsService,
private location: Location) { }
//———init validation——————–//
StatusID = new FormControl(”, [Validators.required]);
publishdate = new FormControl(moment());
ngOnInit() {
this.lookupService.getStatus().subscribe((status: IStatus) => {
this.status = status;
});
this.NewsfeedForm = this._formBuilder.group({
NewsfeedID: [0,null],
StatusID: [”, Validators.required],
publishdate: [”, Validators.required],
title: [”, Validators.required],
headlineCtrl: [”, Validators.required],
newsfeedContentCtrl:[”,null]
})
}
//publishdate = new FormControl(moment([2017, 0, 1]));
newsfeedActions(){
const result = this.NewsfeedForm.value;
console.log(result);
console.log(result);
if(result.NewsfeedID>0){
console.log(‘Update’);
}else{
this.newsfeedService.insertNewsfeed(result);
//—-call toester service to show message—//
}
}
}
and your date picker in html page like bellow:
<mat-form-field appearance=”outline” fxFlex>
<input matInput [matDatepicker]=”publishdate” placeholder=”Publish Date”
formControlName=”publishdate”>
<mat-datepicker-toggle matSuffix [for]=”publishdate”></mat-datepicker-toggle>
<mat-datepicker #publishdate></mat-datepicker>
</mat-form-field>
Life Coders 