CODEWITHSUNDEEP
angularangular-materialdatetimepicker
Abhinav Ashish
Abhinav Ashish

Reputation: 53

Date Time Picker in Angular material

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

Upvotes: 1

Views: 12579

Answers (3)

Scott-MEARN-Developer
Scott-MEARN-Developer

Reputation: 392

As far as I'm aware, Angular material doesn't offer a date/time picker, just a date picker. However, you can use a regular input inside your mat-form-field and set the type to 'datetime' instead, like this:

<mat-form-field>
  <input formControlName="dateTimeSelect" matInput type="datetime-local" id="date" name="date" required />
</mat-form-field>

Just be aware that in Angular 16, a datetime picker inside a matFormField won't show the calander icon suffix to open the form. You can fix that issue by referring to this method:

https://stackoverflow.com/a/77494009/18865220

Upvotes: 0

Saicharan K R
Saicharan K R

Reputation: 21

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

Upvotes: 1

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

The following Angular Material components are designed to work inside a <mat-form-field>:

<input matNativeControl> & <textarea matNativeControl>
<select matNativeControl>
<mat-select>
<mat-chip-list>

Correct Example:

See matInput (It is MatFormFieldControl) is used inside the MatFormField

 <mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>

Wrong Example:

See input is used inside MatFromField which is not a MatFormFieldControl

 <mat-form-field>
    <input type="text placeholder="Input">
  </mat-form-field>

Upvotes: 0

Related Questions