Angular Material Datepicker: Custom field text for empty date

Question

I'm using the Angular Material Datepicker. Is it possible to display a custom text in the field if the value of the input is empty or null? I didn't find a solution for this in the Datepicker API.

In my use case, the user can set an optional release date for an article. If the user don't set a specific release date (date is null), I want to display a text in the input field like "No release restriction" or "Release immediately" or something like that.

Thanks for any help.

Metabolic · Accepted Answer · 2020-10-22 10:00:25Z

1

Assuming that you are using Material Inputs as well, you can very easily manage the labels for the date input.

<mat-form-field appearance="fill">
  <mat-label>YOUR LABEL or {{yourLabel}}</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Even without the material inputs, you can manage the placeholder of input to show text when input is empty.

A step further will be to listen to datepicker changes in angular and dynamically add/append other data if you require more than just a text field

answered Oct 22, 2020 at 10:00

Metabolic

2,9244 gold badges30 silver badges41 bronze badges

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

2 Comments

chrisch Over a year ago

Thanks for the reply I'm using the placeholder property in combination with the label and some custom CSS to style the placeholder like a regular input entry. Works quite well.

Metabolic Over a year ago

You welcome @chrisch . Yes a little bit of patching is required but glad to know it works for you. I have same course of action in my own angular/vue projects :p

Collectives™ on Stack Overflow

Angular Material Datepicker: Custom field text for empty date

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related