React-dates: Support for week numbers

[Bubbi]

It could be very nice to support week numbers in this calendar, as at least in some countries (Denmark, Germany and Sweden) you do a lot of planning in week numbers.

Example: "I'm on vacation from week 28 to week 30".

It could be nice to be able to style week number cells individually from the rest of the table cells.

It would also be nice to be able to enable hover/click event on the week numbers and by default highlight/select that entire week.
Adding custom behaviour to clicking this, would also be very nice, as I would like to highlight/select saturday in the previous week to saturday in the selected week. But it could also be used to highlight/select tuesday and wednesday only in the selected week number (or an ajacent week maybe!?)

[Alqio]

Is there any progress on this?

[Aarbel]

+1 many professionals need week numbers on a date picker.

@Bubbi @Alqio @majapw @ljharb @erin-doyle @mariepw @joaovieira have you found a way to put the weeks number in the react-dates datepicker or do you have updates about its implementation in the core library ? (also it's very simple ti implement).

Thanks a lot !

[mariepw]

@majapw @ljharb if it's ok, I can do the PR .. ?

[Aarbel]

@mariepw yes go

[nerijusgood]

Any luck? @mariepw

[jussiniinikoski]

Here's a way to display week numbers in DateRangePicker.

renderDayContents = (day) => { return ( <React.Fragment> <span className="CalendarDayWeekNumber">{day.format('W')}</span> {day.format('D')} </React.Fragment> ); };

Then add this function to your DateRangePicker as renderDayContents property.
If you only need to show the week number in first cell of the week, you can accomplish this with CSS like this:

CalendarDay { position: relative; } .CalendarDay .CalendarDayWeekNumber { position: absolute; left: 0.2em; top: 0; font-size: 0.5em; display: none; } .CalendarMonth_table tr td.CalendarDay:first-child .CalendarDayWeekNumber { display: block; }

I know that this is a hack, but it works for me anyway..

[levizimmerman]

@jussiniinikoski You did a great job, but adding the following you could reduce the amount of DOM nodes added by checking if the current day is the first day of the week:

```tsx

const renderDayContents = React.useCallback(
(momentInstance: moment.Moment, modifiers: Set) => {
return (
<>

{momentInstance.format('D')}

{/* Add week numbers, adds one button each row */}
{modifiers.has('first-day-of-week') && (

{momentInstance.format('W')}

)}

);
},
[],
);

[Aarbel]

@levizimmerman @mariepw When this will be merged ? Since 2 years :P

[ljharb]

There's no PR to merge yet; this is an issue.