Agfdhyk

//Error



ERROR Error: Uncaught (in promise): Error: Template parse errors:

'app-date-picker' is not a known element:

1. If 'app-date-picker' is an Angular component, then verify that it is part of this module.

2. If 'app-date-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("



<ion-content padding>

  [ERROR ->]<app-date-picker placeholder="Enter The First Date" [(ngModel)]="firstDate" format="YYYY/MM/DD HH:mm:"): ng:///TestpagePageModule/TestpagePage.html@7:2

Error: Template parse errors:

'app-date-picker' is not a known element:

1. If 'app-date-picker' is an Angular component, then verify that it is part of this module.

2. If 'app-date-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("



<ion-content padding>

  [ERROR ->]<app-date-picker placeholder="Enter The First Date" [(ngModel)]="firstDate" format="YYYY/MM/DD HH:mm:"): ng:///TestpagePageModule/TestpagePage.html@7:2

//date-picker.component.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';



  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() {}

}

//app.module.ts



import { DatePickerComponent } from '../app/utility/date-picker/date-picker.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import {MomentDateAdapter,MAT_MOMENT_DATE_FORMATS} from '@angular/material-moment-adapter';

import {

  MatDatepickerModule,

  MatFormFieldModule,

  MatInputModule,

  DateAdapter,

  MAT_DATE_LOCALE,

  MAT_DATE_FORMATS

} from '@angular/material';



@NgModule({

  declarations: [AppComponent, DatePickerComponent],

  entryComponents: ,

  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,

    BrowserModule,

    FormsModule,

    ReactiveFormsModule,

    BrowserAnimationsModule,

    MatDatepickerModule,

    MatInputModule,

    MatFormFieldModule],

  providers: [

    StatusBar,

    SplashScreen,

    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

    {

      provide: DateAdapter,

      useClass: MomentDateAdapter,

      deps: [MAT_DATE_LOCALE]

    },

    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }

  ],

  bootstrap: [AppComponent]

})

export class AppModule {}