Multi tool use

Clash Royale CLAN TAG

Angular - Disable datepicker after toggle switch

I'm using angular material. I want to disable datepicker after switching slide toggle.

My upload form with datepicker:

<form #uploadForm="ngForm" (keydown.enter)="$event.preventDefault()" (ngSubmit)="upload(uploadForm.valid)">
<div class="input-wrapper">
<mat-form-field>
<input
id="date"
name="date"
[(ngModel)]="model.date"
[disabled]="uploadForm.submitted"
[matDatepicker]="datepicker"
[matDatepickerFilter]="dateFilter"
[min]="minDate"
[max]="maxDate"
placeholder="Expiration date"
#date="ngModel"
autocomplete="off"
matInput
readonly
required />
<mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
<mat-datepicker touchUi #datepicker></mat-datepicker>
</mat-form-field>
<div class="tooltip" *ngIf="model.file && date.invalid">This field is required.</div>
<mat-slide-toggle
(change)="setMaxExpirationDate($event)">Set expiration date to 90 days</mat-slide-toggle>
</div>


Now slide toggle only sets max expiration date in my app. I want to also disable datepicker after switching it. How can I achieve that?

change

setMaxExpirationDate()

2 Answers
2

The detailed explanation on how to disable the datepicker or just the parts of the datepicker is available in the official documentation:

https://material.angular.io/components/datepicker/overview#disabling-parts-of-the-datepicker

I assume you want to disable the datepicker once the slide is on true. I made a simplified version of your code on stackblitz. Take a look at the file app/datepicker-overview-example.ts where your setMaxExpirationDate resides. There simply change a variable to the value of the toggle.
You need to add the variable to your disabled attribute of your datepicker as you can see in the file app/datepicker-overview-example.html.

datepicker

app/datepicker-overview-example.ts

setMaxExpirationDate

disabled

app/datepicker-overview-example.html

Here's my stackblitz:
https://stackblitz.com/edit/angular-8x48eo

Please go over the basics of Typescript, Angular and Angular Material, there are a lot of how-to's and guides, a lot of documentation and sample projects. Complete these as they will help you understand and solve small problems like this on your own.

Edit: I forgot to mention, in your code the datepicker is readonly anyways, so there shouldn't be a way to edit it, you should remove that if you want the user to be able to use the datepicker and change it's value.

readonly

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.