Open x-Foz3R-x opened 4 months ago
There seems to be no way of showing number of days when selecting date range.
Is there a reliable workaround to have this?
I tried to create ::after on .rdrDayEndPreview and in content set number of days but it just was 1 update late
.rdrDayEndPreview::after { content: var(--day-number); background-color: hsl(232 9% 27%); color: white; position: absolute; top: -1.75rem; left: 50%; width: fit-content; transform: translateX(-50%); padding-block: 0.125rem; padding-inline: 0.25rem; border-radius: 0.375rem; text-align: center; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 4px rgba(0, 0, 0, 0.03), 0 1px 8px rgba(0, 0, 0, 0.02); z-index: 10; }
<DateRange preview={preview} onPreviewChange={(previewDate) => { const element = document.querySelector(".rdrDayEndPreview") as HTMLElement | null; requestAnimationFrame(() => { if (selecting) { if (element) { element.style.setProperty("--day-number", `"${calculateDays(preview.startDate, previewDate)} days"`); } setPreview({ startDate: preview.startDate, endDate: previewDate }); } else { if (element) element.style.setProperty("--day-number", '"1 day"'); setPreview({ startDate: previewDate, endDate: previewDate }); } }); }} />
Subject of the issue
There seems to be no way of showing number of days when selecting date range.
Is there a reliable workaround to have this?
I tried to create ::after on .rdrDayEndPreview and in content set number of days but it just was 1 update late