Disable input field of datepicker

[mham1]

I am trying to disable the input field of the datepicker component, the equivalent of what would be achieved by
<mat-form-field> <mat-label>Input disabled</mat-label> <input matInput [matDatepicker]="dp3" disabled> <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle> <mat-datepicker #dp3 disabled="false"></mat-datepicker> </mat-form-field>
But cannot find any way to do this using templateOptions or datepickerOptions
Do I have to create a custom date picker template to enable this functionality, or is there a way to do it with the pre-existing datepicker template?

[aitboudad]

PR welcomed!

[aitboudad]

This issue has been fixed and released as part of v5.7 release. You can now pass the disabled value through the datepickerOptions property:

  templateOptions: {
    datepickerOptions: {
      disabled: true,
    },
  },

Please let us know, in case you are still encountering a similar issue/problem.
Thank you!

[SubrahmanyaV]

I am on Formly Material 5.10.3.

• This : field.templateOptions.datepickerOptions.disabled = true; did not work
• While field.templateOptions.disabled = true; works for the input but the datepicker icon is not disabled & on clicking the pop-up shows up, this should get disabled too ...

Worse, the other fields which were disabled gets enabled

[aitboudad]

Worse, the other fields which were disabled gets enabled

@SubrahmanyaV Could you please provide a reproduction example

[SubrahmanyaV]

Worse, the other fields which were disabled gets enabled

@SubrahmanyaV Could you please provide a reproduction example

• field.templateOptions.datepickerOptions.disabled = true; was resulting in an error because of which the other fields were not getting disabled.

• I had to revert to using field.templateOptions.disabled = true; for now but just for your attention this does not disable the datepciker (the icon remains enabled & allows the User to choose a date & the value is reflected in the input)

[aitboudad]

(the icon remains enabled & allows the User to choose a date & the value is reflected in the input

fixed by #2613

[SubrahmanyaV]

• I upgraded to Formly 5.10.6 just before testing this
• The datepicker icon button is still 'not disabled' & it allows me to select a date from the calendar & the same is reflected in the input.
• I use the following code to disable the Formly fields;
  // --- Disable Document entry fields
  this.documentFields.forEach(docField => {
  docField.templateOptions.disabled = true;
  });

Below is the screen shot showing the icon button still enabled

[aitboudad]

the fix will be available in v5.10.7, I'll let you know once released.

[aitboudad]

This issue has been fixed and released as part of v5.10.7 release.

Please let us know, in case you are still encountering a similar issue/problem.
Thank you!

[SubrahmanyaV]

• I upgraded to v5.10.7 before testing this.
• The datepicker icon button is now getting disabled.
  Many thanks for the fix. This issue may be closed...

[bedojs]

Is there an option to only disable the input field and use only the material date picker icon?

[aitboudad]

Is there an option to only disable the input field and use only the material date picker icon?

use true to readonly:

{
  "templateOptions": {
+   "readonly": true
  }
}