I'm currently building a DateTimeRangePicker which is build with two RadzenDatePicker components.
When selecting a start-date in the first picker I want to set the dates lower than the selected to be disabled in the second picker (end-date).
Therefore I use the DateRender-callback and set the Disabled-property to true which is working as expected.
However, when clicking on a disabled date, the popup closes (as the onmouseup="Radzen.closePopup('<someid>')" is always added to the td element. So the popup closes but nothing has been selected (as it's marked disabled). This may lead to issues for users, when the already have a date selected and want to change it.
Personally, if the popup closes after click, I would think the date has been selected without checking what is shown in the text-box. Also, there seems no way to add specific classes for disabled dates (e.g. not-allowed cursor to indicate that a certain date is forbidden.
I already tried to use custom JSInterop this way
window.RadzenDatePicker = {
disableDates: () => {
console.log("#### RadzenDatePicker.disableDates ####");
// get the elements
var disabledSpans = document.querySelectorAll("div.rz-datepicker-calendar-container > table > tbody span.rz-state-disabled");
// loop through span-elements
for (let disabledSpan of disabledSpans) {
// add class to indicate disabled element
disabledSpan.classList.add("cursor-not-allowed");
// clone the data-cell
const clonedTableDataCell = disabledSpan.parentNode.cloneNode(true);
// replace with clone
disabledSpan.parentNode.replaceWith(clonedTableDataCell);
}
}
};
but the onmouseup is still added again. But at least I have the not-allowed class added.
From looking at the source, the onmouseup is only omitted when the RadzenDatePicker is Inline or ShowTime is true.
Is there a purpose behind this behavior, that clicking a disabled date closes the popup without doing anything else? Maybe a parameter bool DisabledDateClickClosesPopup {get; set; } = true; could be added?