Disable input on matDatePicker [Angular Material]

Question

Hey i have input date picker from angular material and i try to make the value disable and let the user choose only from the date picker Calendar and it doesn't work for me.

This is my input:

<p class="p-rtl">
    <mat-form-field class="input-min" appearance="fill">
        <mat-label>Finish Date</mat-label>
        <input matInput [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</p>

The problem is that the user can insert bad inputs and i want to block the user for this inputs.

I try to google it and read reference and nothing not work for me.

Just add "disabled" property to the input, <input disabled matInput [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date"> — TheUnreal
– TheUnreal, Commented Oct 3, 2019 at 12:45
Its disable me the date picker calendar but the input its same available — Baruch_Mashasha
– Baruch_Mashasha, Commented Oct 3, 2019 at 12:48
@TheUnreal, a FormControl can be disabled, when is created, or using "disabled()" method or using a directive stackoverflow.com/questions/52619826/… — Eliseo
– Eliseo, Commented Oct 3, 2019 at 13:16

Shifenis · Accepted Answer · 2019-10-03 12:49:52Z

5

If you are trying to disable your input with disabled in HTML component you have a warning in console (reactive form).

To be able to avoid this, you can disable a FormControl with

 date: new FormControl({value: null, disabled: true})

Then to be sure that the user can't write anything you can put readonly attribute in the template

<p class="p-rtl">
    <mat-form-field class="input-min" appearance="fill">
        <mat-label>Finish Date</mat-label>
        <input matInput readonly [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</p>

answered Oct 3, 2019 at 12:49

Shifenis

1,12512 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Csala · Accepted Answer · 2021-10-21 11:41:06Z

0

Instead of disabling the entire form you can disable like below

<p class="p-rtl">
    <mat-form-field class="input-min" appearance="fill">
        <mat-label>Finish Date</mat-label>
        <input matInput [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date" disabled>
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker  disabled="false"></mat-datepicker>
    </mat-form-field>
</p>

edited Oct 21, 2021 at 11:41

Peter Csala

23.7k16 gold badges51 silver badges96 bronze badges

answered Oct 21, 2021 at 10:51

Keya Ghosh

1

1 Comment

Vega Over a year ago

I am not at all sure that disabled="false" will work

Collectives™ on Stack Overflow

Disable input on matDatePicker [Angular Material]

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related