Custom DateRangePicker Dropdown is not working as expected.

[gokulkrishh]

Some context,

I want to have a option called This month in dropdown which might look like below

const dateRangePickerDropdown = [
	{
		value: 'tm',
		text: 'This month',
		startDate: startOfMonth(startOfToday()),
	}
];

// Here is how component looks like 

<DateRangePicker
    defaultValue={[new Date(dateObj.start), new Date(dateObj.end), dateObj.dropdown]}
    onValueChange={(value) => {
    const [startDate, endDate, dropdown] = value;
    setDateObj({
	    end: format(new Date(endDate), 'yyyy-MM-dd'),
	    start: format(new Date(startDate), 'yyyy-MM-dd'),
	    dropdown,
    });
    }}
    enableDropdown={true}
    placeholder='Select a date'
    enableYearPagination={true}
    maxWidth='max-w-xs'
    marginTop='mt-0'
    color='blue'
    options={dateRangePickerDropdown}
  />

When selecting this month option in the dropdown, I am getting the following value in onValueChange which is correct.

{
  dropdown: "tm",
  end : "2023-01-31",
  start: "2023-01-01"
}

But date values in the calendar widget are not set correctly. It should set the start as 2023-01-01 and end as 2023-01-31 but it set it as start 2023-01-01 and end as 2023-01-17 which is correct.

I looked into the code a bit, there is a condition that I think is in-correct in getEndDate which has below condition in dateRangePickerUtils.tsx file.

//because this, enddate is not set correctly
if (selectedDropdownValue) {
    endDate = startOfToday();
  }

Let me if I got it wrong or there is way to fix this?

[mitrotasios]

hey @gokulkrishh, sorry if this is not clear but the dropdown is meant to be used for relative date ranges. Meaning that you provide a startDate in your options as you did, and the DateRangePicker will set the state to that provided startDate and use today's date as an endDate when that relative dropdown option is selected. We are considering adding an endDate property to the options as well, so that you have full control basically. Let me know what you think and if you have any other questions :)

[gokulkrishh]

@mitrotasios I see, got it. Looking forward to endDate option when its available, otherwise loving the library. Keep up the good work 🔥

[mitrotasios]

hey @gokulkrishh, JFYI the new v1.7.0 now supports an endDate in the dropdown options 🙂

[gokulkrishh]

@mitrotasios Thats Awesome! 💯. One more feedbacks i would like to give is having a chart loader animation for charts. As of now loading of charts without data like BarChart shows empty data.

It would be great to have some kind of animation for loading as well like bool prop .

[mitrotasios]

Yeah, that's a good point. Definitely something we're planning to ad!

[gokulkrishh]

@mitrotasios Awesome 🎉

[Thashwini]

Is this customization still available, I want to customize dropdown options couldn't find a way to do it