feature(datepicker): Built-in support for styling today's date in calendar

[adammedford]

My users want to see today's date in the calendar.

This is a simple enough feature to write myself but I think its use case is generic enough to justify adding it to the default behavior. My primary pain point is that I have written several components that wrap this date picker to augment its configuration under different circumstances and this is just one more piece of logic that I have to duplicate to a certain extent.

Either:

1. Add isToday (or just 'today' if you want to keep with existing nomenclature) to the day template context so that user specified day templates can readily append relevant classes.
2. Add 'today' or some other appropriately named css class to today's date in the calendar by default.

[pkozlowski-opensource]

You can do it on your side even today by providing a custom template for a day cell. I don't think we need another API as the one in place makes it possible to cover your use case and many others.

[pkozlowski-opensource]

Check the "Custom day view" demo: https://ng-bootstrap.github.io/#/components/datepicker

[adammedford]

The point is that this is a pretty generic use case, not that it isn't currently possible. I'd be willing to bet that your average user would be interested in having this feature built in rather than having to write it themselves. Many other datepickers include this feature by default so I suspect this is the case.

I'm well aware of the documentation that you've linked and I've already written this functionality for myself.

[pkozlowski-opensource]

OK, I see. We might revisit this feature request post 1.0 but it won't happen before we cut 1.0 stable.

[adammedford]

Awesome. I appreciate that. I just didn't want it to get lost since I'm sure it will pop up again sooner or later.

[atamas101]

+1 👍
using dayTemplate feels like a hack. like @adammedford , I feel that highlighting current date and past dates in a calendar is a very common use case, so this should be provided out of the box imho

Thanks for looking into this when you have time.

[tplk]

The problem here is that you can't detect current date automatically since application might use timezone different from browser's.
Maybe passing current date to the component is a reasonable solution.

[maxokorokov]

Add isToday (or just 'today' if you want to keep with existing nomenclature) to the day template context so that user specified day templates can readily append relevant classes

Seems redundant to me as you can always compare with calendar.getToday().equals(date)

Add 'today' or some other appropriately named css class to today's date in the calendar by default

I'd say we should at least add the custom css class .ngb-dp-today on the day that corresponds to the day returned by calendar.getToday()

[adammedford]

Add isToday (or just 'today' if you want to keep with existing nomenclature) to the day template context so that user specified day templates can readily append relevant classes

Seems redundant to me as you can always compare with calendar.getToday().equals(date)

The same could be said about using the isDisabled function to check if a date is disabled, but a 'disabled' property is still included in the day template context.

Add 'today' or some other appropriately named css class to today's date in the calendar by default

I'd say we should at least add the custom css class .ngb-dp-today on the day that corresponds to the day returned by calendar.getToday()

While I initially proposed both I do want to mention that by going the CSS class route you lose a lot of customization options. I don't have a specific example in mind but by going with a CSS class you're pretty much limiting yourself to CSS solutions. That is - styling the day (color/font/etc) based on if it is today's date. What you couldn't do is change the DOM with separate templates for each.

This, for example, wouldn't be possible

<ng-template #customDay let-today='today' let-date let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused">
  <span class="custom-day" [class.weekend]="isWeekend(date)" [class.focused]="focused"
        [class.bg-primary]="selected" [class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
   <ng-container *ngIf='today; else notTodayTemplate'>
      {{ date.day }}
   </ng-container 
   <ng-template #notTodayTemplate>
      It is not today.
    </ng-template>
  </span>
</ng-template>

I don't know if anybody wants to do this or why. It doesn't match my uses - just wanted to point it out in case someone gripes in the future. Either option is still better than what I'm doing in my production code.

[maxokorokov]

@adammedford thanks for the example, I agree it is better to have both.

My point was you can always do this:

<ng-template #customDay let-date>
  <span class="custom-day">
   <ng-container *ngIf='isToday(date); else notTodayTemplate'>
      {{ date.day }}
   </ng-container 
   <ng-template #notTodayTemplate>
      It is not today.
    </ng-template>
  </span>
</ng-template>

The same could be said about using the isDisabled function to check if a date is disabled, but a 'disabled' property is still included in the day template context.

We could pass many things to the template (ex. why not let-weekend="weekend"?); the idea is to have only the minimum related to the datepicker state (selection, focus, enabled/disabled). disabled is a bit more complex, because might depend on form control state, min/maxDates and user-provided markDisabled function

By the way since 3.3.0 you can pass any arbitrary data to the template: #2716

So I'd still go for the CSS-only as initial implementation

[adammedford]

Thanks @maxokorokov! I wasn't aware of that change in 3.3.0.

@adammedford thanks for the example, I agree it is better to have both.

My point was you can always do this:

  <span class="custom-day">
   <ng-container *ngIf='isToday(date); else notTodayTemplate'>
      {{ date.day }}
   </ng-container 
   <ng-template #notTodayTemplate>
      It is not today.
    </ng-template>
  </span>
</ng-template>

For what it's worth, my initial reasoning for opening this issue was that I have a couple of applications that have dozens of datepickers (some the same, others with variations.) Some of them only use a custom day template to highlight the day. It would be nice if I didn't have to duplicate that template across those - the CSS covers this.

Others are more complicated than just styling. For those I didn't want to duplicate the isToday() logic, although in retrospect a 'isToday' pipe would have been a good solution. Anybody with those needs I'd point in that direction.

I like the CSS approach because it will satisfy the vast majority of those with minimal intervention. My thinking was that to apply a class to today's date - you already have to have an isToday available internally.