How can we not have initial selection in DateRange?

[rajubushanam]

I am trying to use a DateRange component and I would like to have my initial Calendar empty with nothing selected. Once I start clicking on the calendar then I expect the onChange event to be triggered so we can select the ranges.
Looks like if I pass dateRange: {startDate: null, endDate: null} it comes up with no selection, but if I click on the calendar, onChange event is not being called. Am I doing something wrong here?
Any help would be appreciated.
Thanks.

[onurkerimov]

I think in your case, you should also set a key named 'key' to your selection:

import { useState } from 'react';

const [state, setState] = useState([
  {
    startDate: null,
    endDate: null,
    key: 'selectionName'
  }
]);

<DateRangePicker
  onChange={item => setState([item.selectionName])}
  showSelectionPreview={true}
  moveRangeOnFirstSelection={false}
  ranges={state}
  direction="horizontal"
/>;

[tristramjones]

I'm curious about this as well. I only have 1 range and am setting the initial state of startDate and endDate to null while setting a key. I would expect the calendar to initially render with no selection. The initial render shows the current month's dates highlighted as if selected even though startDate and endDate are set to null.

https://codesandbox.io/s/react-date-range-demo-s1tik

[gaieges]

I've got the same problem, seems as though there's no way to have an empty selection. You either have:

an empty array in the initial state: throws an exception:

Cannot read property 'color' of undefined
DateRange.eval [as updatePreview]
https://4y5g3.csb.app/node_modules/react-date-range/dist/components/DateRange/index.js:182:43
onPreviewChange
https://4y5g3.csb.app/node_modules/react-date-range/dist/components/DateRange/index.js:209:18

the null suggestion above which results in the entire month being selected:

[Veda-cmd]

I found a solution. Do not just pass null. Pass it as new Date(null).
startDate: new Date(null),
endDate: new Date(null).

[gaieges]

Very cool, but defaults to Jan 1 1970.

I ended up hacking around this by using:

            startDate: new Date(),
            endDate: addDays(new Date(), 1),

[evorgevol]

I too am looking to not have an initial value for the DateRange picker. Can we re-open this issue as it's currently not resolved?

[Wgil]

I'm also facing this issue.

[jasonharrison]

There is currently no way to not have an initial value for the DateRange picker. This issue should not have been closed.

[icelic]

I found a workaround. If you have multiple ranges in your initial state object just leave out the range which you do not want to define in the calendar.

Instead of:

const [ranges, setRanges] = useState({
    selection: {
      startDate: new Date(),
      endDate: subDays(new Date(), 7),
      key: 'selection',
    },
    compare: {
      startDate: new Date(),
      endDate: subDays(new Date(), 7),
      key: 'compare',
    },
  });

Leave out compare:

const [ranges, setRanges] = useState({
    selection: {
      startDate: new Date(),
      endDate: subDays(new Date(), 7),
      key: 'selection',
    },
  });

And then in the onChange handler add the missing range in the state object and it should appear on the calendar.

Note: I am using custom date display inputs instead of default ones, so I am not sure if this will work but maybe the idea will help.

[gaieges]

ranges expects an array, are you using that ranges var directly in the DatePicker?

I played around with the codesandbox in the comment above and couldn't get it to work that way. Curious if you would have any luck with that approach there @icelic ?

[icelic]

I had multiple ranges and I wanted the second one not to be selected by default, but I am not sure if that can be applied to this case/sandobx.

[Victor-Varghese]

any new updates? i'm also facing same issue @onurkerimov

how to show picker without a range selected? set start/end as null, its selecting all days