Pfthb

Im using the Angular Material Datepicker.

Ive followed the tutorial here -> https://theinfogrid.com/tech/developers/angular/custom-date-formats-angular-material-date-picker/ because the Date picker was not allowing me to input a date.

THE PROBLEM
When the user starts typing in a date, the datepicker automatically enters in a date in 2018. It is then a hard experience fixing that date

SOLUTIONS IVE TRIED
Ive tried using all the types of Date pickers on the angular material guide. Ive tried the solution listed above. Im not sure why this is happening

THE CODE

<!--app.html file-->
<app-date-picker name="date-picker" placeholder="mm/DD/yyyy" [(ngModel)]="birthDate" format="MM/DD/YYYY"></app-date-picker>


//app.ts file
birthDate = moment();


<!--utility/date-picker/date-picker.html-->
<mat-form-field>
 <mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
 <input matInput name="date-picker" [matDatepicker]="picker" [value]="dateValue" (dateInput)="addEvent('input', $event)" [placeholder]="placeholder">
 <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

// utility/date-picker/date-picker.ts
import Component, forwardRef, Input from '@angular/core';
import ControlValueAccessor, NG_VALUE_ACCESSOR from '@angular/forms';

import MatDatepickerInputEvent from '@angular/material/datepicker';
import * as moment from 'moment';

@Component(
 selector: 'app-date-picker',
 templateUrl: './date-picker.component.html',
// styleUrls: ['./date-picker.component.css'],
 providers: [
 
 provide: NG_VALUE_ACCESSOR,
 useExisting: forwardRef(() => DatePickerComponent),
 multi: true
 
 ]
)
export class DatePickerComponent implements ControlValueAccessor 
 /**
 * Set the value of the date set by user, notice the underscore infront of the datevalue
 */

 @Input() _dateValue: string = null;

 /**
 * Placeholder value for the material control input
 */
 @Input() public placeholder: string = null;

 /**
 * The date format to use with default format but allowing you to pass a custom date format
 */
 @Input() private format = 'YYYY/MM/DD HH:mm:ss';

 @Input() private isTouch: boolean = false;

 get dateValue() 
 return moment(this._dateValue, this.format);
 

 set dateValue(val) 
 this._dateValue = moment(val).format(this.format);
 this.propagateChange(this._dateValue);
 

 addEvent(type: string, event: MatDatepickerInputEvent<Date>) 
 this.dateValue = moment(event.value, this.format);
 

 writeValue(value: any) 
 if (value !== undefined) 
 this.dateValue = moment(value, this.format);
 
 
 propagateChange = (_: any) => ;

 registerOnChange(fn) 
 this.propagateChange = fn;
 

 registerOnTouched() 

The module files follow the imports in the guide.

Is this happening to anyone else?