search

gpbl / react-day-picker

DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.
https://daypicker.dev
MIT License
5.88k stars 702 forks source link

showOutsideDays is disabled 1st on month start always on Sunday #2036

Closed tyki6 closed 20 hours ago

tyki6 commented 5 months ago

Description

showOutsideDays is disabled 1st on month start always on Sunday

Expected Behavior

On february when showOutsideDays is disabled 1 february start on thursday and not on monday.

Actual Behavior

<DayPicker initialFocus showOutsideDays  mode="range" numberOfMonths={2} defaultMonth={new Date} />

image

<DayPicker initialFocus showOutsideDays={false}  mode="range" numberOfMonths={2} defaultMonth={new Date} />

image

Steps to Reproduce

show two month, in February. code: 

<DayPicker initialFocus showOutsideDays  mode="range" numberOfMonths={2} defaultMonth={new Date} />

Possible Solution

If you have a suggestion on how to fix the issue, please include it here.

Your Environment

deka014 commented 3 months ago

I was facing the same issue. I solved it by fixing the css of the day picker table row (added justify-content-end css property). When we disable the showOutsideDays, the items are shifted towards left for the first row as there are less than seven <tr> in the first row

table: 'w-full border-collapse space-y-1', head_row: 'flex', head_cell: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]', row: 'flex justify-end w-full mt-2', cell: 'text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20'

gpbl commented 20 hours ago

Please provide a code sandbox to replicate the issue, thanks!