Angular – Date Time Picker in Angular material

angularangular-materialdatetimepicker

I am trying to implement date time picker in angular material form but Iam unable to do that. Please find my code below.

<mat-form-field>
  <input formControlName="nextScheduledDate" mdc-datetime-picker="" date="true" time="true" type="text" id="datetimeedit"
         placeholder="Scheduled Date and Time" show-todays-date="" minutes="true" min-date="minDate" max-date="maxDate"
         edit-input="true" show-icon="true" ng-model="dateTimeEdit" name="datetimeedit"
         class=" dtp-no-msclear dtp-input mat-input">
</mat-form-field>

I am getting following error while implementing:

PopupDialogComponent.html:24 ERROR Error: mat-form-field must contain
a MatFormFieldControl.
at getMatFormFieldMissingControlError (form-field.js:109)
at MatFormField._validateControlChild (form-field.js:691)
at MatFormField.ngAfterContentChecked (form-field.js:495)
at callProviderLifecycles (core.js:32324)
at callElementProvidersLifecycles (core.js:32293)
at callLifecycleHooksChildrenFirst (core.js:32275)
at checkAndUpdateView (core.js:44276)
at callViewAction (core.js:44637)
at execComponentViewsAction (core.js:44565)
at checkAndUpdateView (core.js:44278)

While adding matInput the date picker is not opening. Please help me out

Best Answer

you can use Another approach for using DateTime picker in angular project i.e is by using mat-datetimepicker which is available to install by following commands.

npm i @mat-datetimepicker/core
npm i @mat-datetimepicker/moment

I made the below stackblitz link for practical representation of solution

https://stackblitz.com/edit/angular-vesksm-z5ahjm

References: https://github.com/kuhnroyal/mat-datetimepicker

Related Topic