Hi Stefan,
Thanks for the above. It worked well.
However, now I am trying to use the CustomCell approach for the DateRangePicker to remove the title attribute on the multiviewcalendar cells as well. However, I am having trouble getting the same output that I have without the Custom MultiViewCalendar. I need to have the start and end inputs to have different values accordingly (cause they are currently both taking same value onChange) and the calendar to highlight the range from the start to the end dates like the attached screenshot.
Below kindly find the code I am using.
Thanks,
Lara
export class CustomStartDateInput extends React.Component {
render() {
return (
<label>
<DatePicker
{...this.props}
label={undefined}
show={false}
width={"49%"}
title=" "
/>
</label>
);
}
}
export class CustomEndDateInput extends React.Component {
render() {
return (
<label>
<DatePicker
{...this.props}
label={undefined}
show={false}
width={"49%"}
title=" "
/>
</label>
);
}
}
export class CustomCalendarCell extends React.Component {
handleClick = () => {
this.props.onClick(this.props.value);
};
render() {
const style = {
cursor: "pointer"
};
const className = classNames({
"k-state-selected": this.props.isSelected,
"k-state-focused": this.props.isFocused
});
return (
<td onClick={this.handleClick} className={className} style={style}>
<span className="k-link">{this.props.children}</span>
</td>
);
}
}
export class CustomCalendar extends React.Component {
render() {
return (
<MultiViewCalendar
value={{start:this.props.value.start, end:this.props.value.end}}
onChange={this.props.onChange}
cell={CustomCalendarCell}
/>
);
}
}
export const renderDateRangeField = ({
label,
input,
meta: { touched, error },
classes,
...custom
}) => (
<LocalizationProvider language="en">
<IntlProvider locale="en">
<DateRangePicker
title=" "
format={"dd/MM/yyyy"}
formatPlaceholder={{
year: "year",
month: "month",
day: "day"
}}
startDateInput={CustomStartDateInput}
endDateInput={CustomEndDateInput}
calendar={CustomCalendar}
popupSettings={{ className: "k-calendar-popup-left" }}
value={
input.value
? {
start: input.value.start
? new Date(input.value.start.toString())
: null,
end: input.value.end
? new Date(input.value.end.toString())
: null
}
: null
}
onChange={value => {
if (value.value) {
console.log(value.value)
if (value.value.start !== null && value.value.end === null)
value.value.end = value.value.start;
if (value.value.end !== null && value.value.start === null)
value.value.start = value.value.end;
input.onChange({
start: value.value.start
? new Date(value.value.start.toString())
: null,
end: value.value.end
? new Date(value.value.end.toString())
: null
});
} else input.onChange(null);
}}
{...custom}
/>
</IntlProvider>
</LocalizationProvider>
);