I'm trying to use the Datepicker feature of Angular Material and got this error inside the "div" I created. "Error: A MatDatepicker can only be associated with a single input." After getting this error, I saw that when I select the dates, I cannot affect the following. I was only able to change the date area above.
You can see the feature I'm trying to use here:
calendar
Here is my HTML code:
<div class="col-2">
<mat-form-field appearance="outline" class="margin-0">
<mat-label>{{ "PROD_REPORT.FROM" | translate }}</mat-label>
<input matInput [matDatepicker]="picker" [(ngModel)]="start_time" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline" class="margin-0">
<mat-label>{{ "PROD_REPORT.TO" | translate }}</mat-label>
<input matInput [matDatepicker]="picker" [(ngModel)]="end_time" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
I am facing the same issue, Actually when you use Angular material date picker multiple fields in the same form, then you should use #picker name should be different.
<div class="col-2">
<mat-form-field appearance="outline" class="margin-0">
<mat-label>{{ "PROD_REPORT.FROM" | translate }}</mat-label>
<input matInput [matDatepicker]="picker" [(ngModel)]="start_time" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline" class="margin-0">
<mat-label>{{ "PROD_REPORT.TO" | translate }}</mat-label>
<input matInput [matDatepicker]="picker_another" [(ngModel)]="end_time" />
<mat-datepicker-toggle matSuffix [for]="picker_another"></mat-datepicker-toggle>
<mat-datepicker #picker_another></mat-datepicker>
</mat-form-field>
</div>
I'm trying to add a tooltip icon beside the mat-label of a form field.
Is there a way to do that
<mat-form-field appearance="outline">
<mat-label>Date</mat-label>
<mat-icon class="help" svgIcon="faQuestionCircle" [matTooltip]="Date"></mat-icon>
<input matInput formControlName="date" [matDatepicker]="picker" (dateInput)="setDate($event.value)"
[min]="todayDate" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
If I try to add an icon inside the label then the tooltip is not getting displayed.
Date ?
I use matte DatePicker for input and output date selection. [MatDatepicker] = It works when I type "Selector". When you give someone a different name, only [matDatepicker] = "selector" works and the other gives an error. How can I fix?
<mat-form-field>
<label>Entry Date?</label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field>
<label>Pay Date?</label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
Your question is unclear but it sounds like you are wanting to have two date pickers but are struggling since you need to provide a different name for [matDatePicker]. Your picker value needs to match your binding on the <mat-datepicker>
Example:
<mat-form-field>
<label>Entry Date?</label>
<input matInput [matDatepicker]="startDate">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate></mat-datepicker>
</mat-form-field>
<mat-form-field>
<label>Pay Date?</label>
<input matInput [matDatepicker]="endDate">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate></mat-datepicker>
</mat-form-field>
Here's a stackblitz: https://stackblitz.com/angular/lyeebaxdmyd
Todo :
I want to open a date picker "#picker" when its input has focus but it's not working when using onfocus input event and gives an error:
error : 'picker is not defined'
<mat-form-field style="width: 100%;">
<input matInput [matDatepicker]="picker" onfocus="picker.open()"
placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker">
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
but when I did it by a button press it worked
<button mat-button (click)="picker.open()">show date picker</button>
how can I do this by focusing on an input
You should use Angular event binding:
<input ... (focus)="picker.open()" >
See this stackblitz for a demo.
I am building a component (html, css, spec.ts, ts) in angular in which I always want endDate > startDate. I have followed this link https://material.angular.io/components/datepicker/overview in order make multiple datepickers.
Below is my HTML for startDate and endDate:
startDate:
<div class="start-date" fxFlex="50%" fxFlexOrder="1">
<mat-form-field>
<input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
</div>
endDate:
<div class="end-date" fxFlex="50%" fxFlexOrder="2">
<mat-form-field>
<input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
</div>
Now below is my angular code (ts) where I am calling validateForm method on the page load.
ngOnInit() {
....
this.validateForm();
}
validateForm() {
this.unavailabilityForm = this.formBuilder.group({
'startDate': ['', Validators.required],
'endDate': ['', Validators.required],
'unavailabilityReason': ['']
});
}
ProblemStatement:
Now what I need to do is - if I have selected any date in startDate (for example 23rd Nov), then in the endDate datepicker all the dates before and including 23rd Nov should be disabled so that I can only select dates after 23rd Nov only. Is this possible to do in Angular?
Can we achieve that by placing minDate and maxDate somewhere in HTML or TS ?
Binding with [min] works perfect for any date
.ts file
//today's date
todayDate:Date = new Date();
//any date
someDate: Date = new Date(anydate);
.html file
<mat-form-field>
<input matInput [matDatepicker]="picker" [min]="todayDate" placeholder="Appointment date" formControlName="appointment_date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
Since you are using a reactive form, utilize the form controls. It's not recommended to have two bindings (ngModel and formControl). So drop the ngModel like I suggested in a previous question of yours: https://stackoverflow.com/a/47426879/6294072
So populate your form controls with the values of from your object unavailability.
constructor(private formBuilder: FormBuilder) {
this.unavailabilityForm = this.formBuilder.group({
startDate: [this.unavailability.startDate],
endDate: [this.unavailability.endDate]
});
}
if you are receiving the values at a later point you can use patchValues:
this.unavailabilityForm.setValue({
startDate: this.unavailability.startDate;
endDate: this.unavailability.endDate;
})
else you can set the values when you build the form.
Then the only thing you need to add to your second datepicker is [min] like the other answer mentioned. There utilize the form control value:
<input matInput
[min]="unavailabilityForm.controls.startDate.value"
formControlName="endDate" ...>
DEMO
Unless I'm missing something, you can use the [min]="" date property:
<div class="item item-2" fxFlex="50%" fxFlexOrder="2">
<mat-form-field>
<input matInput [min]="startDate" [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
</div>
Whatever startDate is will limit the Calendar dates available for endDate. If you need it set before startDate is chosen, use another variable and set it in consturctor() or ngOnInit() of your component.
See: https://material.angular.io/components/datepicker/overview#date-validation
Using the valueChanges of Angular reactive forms and Min feature here is a complete working solution with validation and reactive forms
you can also see the image that the publishedTo only accepts values greater than or equal to any values you set on the PublisedFrom
components.ts
export class AnnouncementformComponent implements OnInit {
constructor(private _formBuilder: FormBuilder){}
Announcementform: FormGroup;
minDate:Date;
this.Announcementform = this._formBuilder.group({
PublishedFrom: ['', Validators.required],
PublishedTo: ['', Validators.required],
});
this.Announcementform.valueChanges.subscribe(res=>{
this.minDate = new Date(res.PublishedFrom);
});
component.html
<mat-form-field appearance="outline">
<input matInput [matDatepicker]="PublishedFrom" placeholder="Publish FROM *"
formControlName="PublishedFrom">
<mat-label>Publish FROM *</mat-label>
<mat-datepicker-toggle matSuffix [for]="PublishedFrom"></mat-datepicker-toggle>
<mat-datepicker #PublishedFrom></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="outline">
<input matInput [matDatepicker]="PublishedTo" placeholder="Publish To *"
formControlName="PublishedTo" [min]="minDate">
<mat-label>Publish TO *</mat-label>
<mat-datepicker-toggle matSuffix [for]="PublishedTo"></mat-datepicker-toggle>
<mat-datepicker #PublishedTo></mat-datepicker>
</mat-form-field>
I am also writing additional code below if someone needs to start his date from a specific date or greater or equal to current date can use simple line of code below
1- create a variable in your component class name it for example startDate
startDate:Date;
ngOnInit() {
//---This will set the datepicker to accept values from current date or above---//
//--- you can also customize the value to set any date you want----//
this.startDate= new Date();
}
then in your component.html file
<mat-form-field appearance="outline">
<input matInput [matDatepicker]="publishdate" placeholder="Publish Date *"
formControlName="publishdate" [min]="startDate">
<mat-datepicker-toggle matSuffix [for]="publishdate"></mat-datepicker-toggle>
<mat-datepicker #publishdate></mat-datepicker>
</mat-form-field>
I used [min]="startDate.value" and worked like expected (disabled endDate calendar previous dates from selected date in startDate Calendar)
Latest version accept minDate and maxDate as Properties
https://material.angular.io/components/datepicker/api
<mat-calendar [minDate]="theDateYouWant"></mat-calendar>
<mat-form-field >
<input placeholder="Enter Date" matInput
[matDatepicker]="picker1"
formControlName="voucherExpirationDate"
[min]="minDate">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
first date
<mat-form-field appearance="outline" class="w-100">
<mat-label>1st installment date</mat-label>
<input matInput [matDatepicker]="firstDate (focus)="firstDate.open()"
placeholder="Select 1st installment date"
formControlName="fstInstalmentDate" readonly required>
<mat-datepicker-toggle matSuffix [for]="firstDate"></mat-datepicker-toggle>
<mat-datepicker #firstDate></mat-datepicker>
</mat-form-field>
2nd date
<mat-form-field appearance="outline" class="w-100">
<mat-label>2nd installment date</mat-label>
<input matInput [matDatepicker]="secondDate" (focus)="secondDate.open()"
placeholder="Select 2nd installment date"
[min]="settingForm?.get('fstInstalmentDate')?.value"
formControlName="scndInstalmentDate" readonly required>
<mat-datepicker-toggle matSuffix [for]="secondDate"></mat-datepicker-toggle>
<mat-datepicker #secondDate></mat-datepicker>
</mat-form-field>
Here settingForm is my formgroup name, Just one line change in second date no need to write anything in .ts file
//today's date in your component.ts file declare varaible which stores present //date
presentDate:Date = new Date();
//and in component.html write [min]= "presentDate" in input of type date
<input matInput [matDatepicker]="picker" [min]="presentDate" placeholder="Appointment date" formControlName="appointment_date">
<mat-datepicker-toggle matSuffix [for]="picker">
<mat-datepicker #picker>