When I copy the DatePicker example from the Angular Material website it's adding an extra horizontal line to the bottom of it and I can't figure out why.
Here's the example:
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
And here's a screenshot:
this problem is because you are using the angular material and also the cdn of materialize or materialize style.
you could delete this line:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
and the line of the datepicker will be ok, and then, you could use other grid system for de rows and cols.
for example: https://github.com/angular/flex-layout
I am just leaving this here in case someone else makes the same mistake I did. In my case I accidentally copy and pasted the date picker code inside an existing mat-form-field. I didn't notice it at first because of all the markup.
I had it like this and removing the outer mat-form-field fixed it for me:
<mat-form-field>
<mat-form-field>
<mat-label>End Date</mat-label>
<input matInput [(ngModel)]="endDate" #endDate="ngModel" [matDatepicker]="picker1">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
</mat-form-field>
Related
I have my mat-datepicker in 2 places on the page. And when I'm clicking on the one place, it opens in an oposite place. How can I fix that? I have 2 different components with mat-datepicker, but it opens different.
Maybe the problem is that I imitate click in one component? But why it opens different one?
Here's the code
Opens here: (child.components.html)
<mat-form-field appearance="fill">
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker ngDefaultControl></mat-datepicker>
</mat-form-field>
Clicks here: (parent.component.html)
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input [min]="minDate" (dateInput)="onDate($event)" matInput [matDatepicker]="picker" (keydown)="false">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker ngDefaultControl></mat-datepicker>
</mat-form-field>
Onchange event opens Calendar like this:
public onTabChange(event: MatButtonToggleChange): void {
setTimeout(() => {
const element: HTMLElement = document.getElementsByClassName('mat-icon-button')[0] as HTMLElement;
element.click();
}, 200);
}
try give differents "template reference variable" (replace one #picker by, e.g. #picker2 and replace the picker by picker2.
About imitate click (it's not the problem) I suggest use a ViewChild and directly use open method
import {MatDatepicker} from '#angular/material/datepicker';
#ViewChild('picker2') datepicker:MatDatepicker<any>
public onTabChange(event: MatButtonToggleChange): void {
setTimeout(() => {
this.datepicker.open()
});
}
See that you needn't "wait" the 200 miliseconds. The setTimeout say to angular: "hey you!, repaint the app and after, remember execute the code under the setTimeout" -the same happens if you use change detector and use .markForCheck()-
I'm facing really annyoing issue for quite a long time.
I've upgrade my angular from version 6 to the newest one (currently 9.1.3, material 9.2.1).
The problem is:
the label and/or placeholder is not floating. It happens only when I open the application in browser for the first time after ng serve. The bug dissapears when i refresh browser tab.
not floating placeholder bug
the code look like this:
<div class="field__wrapper">
<p>Location</p>
<mat-form-field class="form__field">
<input
matInput
type="text"
placeholder="E.g. Santorini, Greece"
formControlName="location"
maxlength="60">
<mat-error *ngIf="newEventForm.controls['location'].touched && !newEventForm.controls['location'].dirty">
Location is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
Is it possible to somehow catch click event on angular material datepicker toggle icon? I want trigger function foo().
My implementation looks like:
<mat-form-field class="example-full-width">
<input matInput [matDatepicker]="picker" placeholder="Date">
<mat-datepicker-toggle matSuffix [for]="picker" (click)="foo()"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
I have already tried put (click)="foo()" to mat-datepicker-toggle and mat-datepicker element but event not triggered.
Use opened and closed event emitter provided by angular date picker component to listen open and close of calander component.
<mat-form-field class="example-full-width">
<input matInput [matDatepicker]="picker" placeholder="Date">
<mat-datepicker-toggle
matSuffix [for]="picker" (click)="foo()"></mat-datepicker-toggle>
<mat-datepicker
#ref
(opened)="toggle(ref)"
(closed)="toggle(ref)"
#picker></mat-datepicker>
</mat-form-field>
Example
Try to (focus)="foo()" instead of (click)="foo()"
I am relatively new to Angular and I couldn't find any solution to the following problem.
I have the following code:
<mat-form-field>
<input matInput placeholder="ZIP" style="color:red;">
</mat-form-field>
I want it to write the word ZIP in red, but all it does is showing a red cursor, and the word zip is still grayed out.
This works perfectly when working with input, and not with matInput.
Does anybody know how can it be solved?
Thanks!
Try this way :
<mat-form-field class="example-full-width">
<mat-label style="color: red">Zip</mat-label>
<input matInput>
</mat-form-field>
Live example :
https://stackblitz.com/edit/angular-rkewwm?file=app/input-overview-example.html
(Don't forget to upgrade your package #angular/material, v5 min if I'm not mistaken)
In the datepicker documentation there is an example of the popup calendar being controlled programatically by using the open() and close() methods like so:
<mat-form-field class="example-full-width">
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>
One can also set the opened property to true/false like so:
<button mat-raised-button (click)="picker.opened = true">Open</button>
I wonder if there is anyway to use this to get the calendar popup to stay permanently opened for the purpose of letting the user click around on different dates, and having those selection reflected in the input?
I guess you can try this :
<mat-form-field class="example-full-width">
<input matInput (dateChange)="reOpenCalendar()" [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>
in your component ts/js file you need to declare a new method :
export class YourComponent{
#ViewChild('picker') picker;
//....
reOpenCalendar(){
let self = this;
setTimeout(
()=>{
self.picker.open();
},
50
);
}
}
This will introduce a flash effect as the date picker disappears and quickly reappears.
The other solution would be fork angular material datepicker component in your local project and introduce an Input property to disable the closing when a date is selected
The built-in datepicker control of Material library comes with an internal Calendar component. You can use the following to have a calendar that is always open (without the input box but still works with date/month/year selection)
Read more about the calendar here:
https://onthecode.co.uk/angular-material-calendar-component/