How to display selected day/dates (when DateRangePicker)?

[filippos13]

Hi! I'm using react-calendar and I find it extremely good and fast. I would like to know how to display selected day/dates (when DateRangePicker)?

[wojtekmaj]

Since depending on the configuration React-Calendar may return a date or an array of dates, here's what I'm using in test suite to render currently selected dates:

react-calendar/test/Test.jsx

Lines 115 to 136 in 41b1981

	function renderDebugInfo() {
	const renderDate = (dateToRender) => {
	if (dateToRender instanceof Date) {
	return formatDate(locale, dateToRender);
	}
	return dateToRender;
	};
	if (Array.isArray(value)) {
	return (
	<p>
	{`Chosen date range: ${renderDate(value[0])} - ${renderDate(value[1])}`}
	</p>
	);
	}
	return (
	<p>
	{`Chosen date: ${value ? renderDate(value) : '(none)'}`}
	</p>
	);
	}

Obviously, you'll need to have access to value, so you will need to use onChange to get the new value whenever it's changed.

[filippos13]

Thanks! I got an idea how to implement it! Although, I face a weird situation. I click on a date and the value it returns me is one day earlier (I talk about the start date. The end date is correct). Correct me if I am wrong (it's the first time I work with dates & calendars).

This is the code of the calendar. I display it so you know I didn't change anything to the logic of the dates.

[wojtekmaj]

What you're seeing in the console is just ISO representation of the date. Meaning it's being represented in UTC+0 timezone instead of your own, resulting in this offset. In other words, simplifying a lot, when it's Tuesday midnight at your place, it's Monday 21:00 in London.

[filippos13]

Thanks for everything! 👍