weekStartsOn is ignored

[kivi]

Subject of the issue

If you set weekStartsOn={1} of DateRangePicker the month view is displayed correctly. I can see week rows starting with Monday. But if I select "This Week" or "Last Week" on the DatePicker, then it will select the Sunday from previous row until Saturday of current row. Here I am expecting only current row from Monday until Saturday will be selected.

[BUG] Bug Reproduce Steps

    <DateRangePicker
      ranges={[selectionRange]}
      weekStartsOn={1}
      onChange={handleSelect}
    />

(not) working Example on Codesandbox: https://codesandbox.io/s/nervous-mclean-6fo3c?file=/src/App.js

---

---

Environment

Package Version: react-date-range 1.4.0, date-fns 2.28.0 React version: 17.02 and 10.0.0.alpha Node version: 16.13.1 Browser: Brave, Firefox on Linux and on a Browser on OsX

[fandrupaw]

+1 same here

[kivi]

@fandrupaw I switched meanwhile to https://github.com/uselessdev/datepicker. Implementation was very smooth. The developer also responds very fast.

[ZulianTiger]

+1 same here

[geogredoansg]

Find out this issue is related to the function startOfWeek from date-fns (https://stackoverflow.com/questions/55241424/discrepancy-between-date-fns-startofweek-and-format-w) To fix it we have to modify the staticRanges to guide the calendar to use startOfWeek(new Date(), {weekStartsOn: 1}) or startOfISOWeek(new Date()) (for shorter syntax)

My working code:

import { DateRangePicker, createStaticRanges } from "react-date-range";

.........

const staticRanges = createStaticRanges([
  {
    label: 'Last week',
    range: () => ({
      startDate: startOfISOWeek(subDays(new Date(), 7)),
      endDate: endOfISOWeek(subDays(new Date(), 7)),
      key: 'selection'
    }),
    isSelected: (range) => {
      if (range.startDate && range.endDate) {
        return (
          isSameDay(range.startDate, startOfISOWeek(subDays(new Date(), 7))) &&
          isSameDay(range.endDate, endOfISOWeek(subDays(new Date(), 7)))
        )
      }
      return false;
    }
  },
  {
    label: 'This week',
    range: () => ({
      startDate: startOfISOWeek(new Date()),
      endDate: endOfISOWeek(new Date()),
      key: 'selection'
    }),
    isSelected: (range) => {
      if (range.startDate && range.endDate) {
        return (
          isSameDay(range?.startDate, startOfISOWeek(new Date())) &&
          isSameDay(range?.endDate, endOfISOWeek(new Date()))
        )
      }
      return false;
    }
  },
  ......
]);

...........
<DateRangePicker
     ...
     weekStartsOn={1}
     staticRanges={staticRanges}
/>