How to autofocus with highlight blue color on today date in datepicker of angular material?
How to autofocus with highlight blue color on today date in datepicker of angular material?
I want today date should be highlighted by default even without selecting it. and if i'll select other date then other date should become highlight. I am using angular material datepicker. Is there any way to do it? My code sample is:
<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>
this sample link is from https://material.angular.io/components/datepicker/overview
I want output some thing like the screen shot, but highlight color should be go to selected date after selecting any other date.
2 Answers
2
You need to use ng-deep for the above case.
You have two classes here
We need to override these classes and provide our styles.
1.mat-calendar-body-today
2.mat-calendar-body-selected
As the name specifies to today's date class mat-calendar-body-today is attached and Similarly to selected date class mat-calendar-body-selected is attached.
Update:-
I have tested it from my end and it works...
Add below code in your css
This will hide this class mat-calendar-body-today which we don't need.
::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected) display: none;
Not just bind your datepicker with an [(ngModel]) attribute and initialize that variable to today's date. This will make today's day as selected.
selectedBefore = new Date();
<input matInput [(ngModel)]="selectedBefore" [matDatepicker]="beforeDate" id="beforeDate" name="before" placeholder="Before Date" (dateChange)="onDateChange($event)" disabled>
that is what you can do initially you can change the color and once on first select event you can change the style of this class to display:none
– Swapnil Sanu
Aug 31 at 6:54
actually i don't know the exact code for select event to remove the highlighted today date in angular or jquary. can you please send me the code for the select event.
– Razi Ahmad
Aug 31 at 6:56
override this class mat-calendar-body-selected also and style it in the same way. As this is the class that get attached to selected class. You need .mat-calendar-body-today only initialially ...after that it's no use as you will always have something selected and selected date will have this 'mat-calendar-body-selected' class
– Swapnil Sanu
Aug 31 at 6:58
you can attach a (change) or (select) event to your datepicker .Pass event value.From event value you can get class list of all the classes and you can remove this particular class. Please Google,It not big issue,You can easily solve it now.
– Swapnil Sanu
Aug 31 at 7:05
style.css
.mat-calendar-body-cell-content.mat-calendar-body-today
background-color: green !important;
color: white !important;
Stackblitz demo
Actually this is not my issue, I want to highlight current date by default and when any date is selected then that highlight should transfer to selected date and only selected date should be highlighted not current date now. I think you understand my requirement now.
– Razi Ahmad
Aug 31 at 6:50
Thankyou but our requirement is by default current date should be highlighted and if select any other date then that date should become highlight and current date should not highlight, but here current date is not highlighting by default in you link. please make current date should highlight by default without selecting any date and this highlight should go when we select other date.
– Razi Ahmad
Aug 31 at 7:02
you can pass default date is today by date = new FormControl(new Date()); check link again
– Krishna Rathore
Aug 31 at 7:04
Here by default today date should not come in input field, but here today date is displaying in put field. I think we have to use some thing like " select event to remove this today's class using jquery or angular." If u can please update the link.
– Razi Ahmad
Aug 31 at 7:09
Thankyou Krishna for your cooperation
– Razi Ahmad
Sep 3 at 15:06
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
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.
Actually this is not my issue, I want to highlight current date by default and when any date is selected then that highlight should transfer to selected date and only selected date should be highlighted not current date now. I think you understand my requirement now.
– Razi Ahmad
Aug 31 at 6:50