[#10979] Highlight today date and add today button

[daongochieu2810]

Fixes #10979

Outline of Solution

• Highlight today date with ng-template
• Add today button

[damithc]

In the examples I have seen elsewhere, the 'today' button is actually inside the picker dialog itself. Is that possible? e.g.,

[daongochieu2810]

In the examples I have seen elsewhere, the 'today' button is actually inside the picker dialog itself. Is that possible? e.g.,

Yes thats possible. I will make the change

[ccyccyccy]

There is a bug here. The following and previous month's dates are hidden even though they are supposed to muted only.

Before	After

We should also consider the styling of today's date in the edge case where it appears as a "following month" on the currently viewed month.

Also, I find that the today date highlight and the currently selected date highlight are too similarly styled. Maybe we can use something similar to the image below? Another advantage is that we can combine their styles if today's date is the selected date.

[ccyccyccy]

Change name similarly for ft1, ft2, ft3 and ft4.
If possible, can try passing in the parameter for the model change without repeating the footer template 4 times.

[daongochieu2810]

Its possible with a custom template. But not possible with [footerTemplate] directive and without using it the Today button will not appear inside the datepicker

[ccyccyccy]

Did you try using .ngb-dp-today to style it? You could avoid the usage of the custom day template that way.

[daongochieu2810]

Did you try using .ngb-dp-today to style it? You could avoid the usage of the custom day template that way.

That does not seem to work on the input component. Perhaps it only works with a datepicker template

[ccyccyccy]

You probably have to put it in the styles.scss file.

[daongochieu2810]

Somehow setting the color for the number does not work

[ccyccyccy]

The reason is because the color setting is getting overwritten by the child class btn-light.

Being more specific in the CSS selector would solve this problem.

.ngb-dp-today > .btn-light {
  font-weight: bold;
  color: blue
}

[ccyccyccy]

LGTM

[madanalogy]

LGTM