Title attribute on DatePickers

Hello, Lara,

These messages are controlled via the LocalizationProvider.

This allows to set an empty string for a title or set it to a custom one.

More details and example can be found here:

https://www.telerik.com/kendo-react-ui/components/dateinputs/globalization/

I hope this is helpful.

Regards,
Stefan
Progress Telerik

Hi Stefan,

Thanks for the above. I have managed to remove both the date input title and the "Toggle calendar" title on the date input icon using the below:

loadMessages({ "datepicker": { "toggleCalendar": " " } }, 'en');

However, what date field name do I have to use to remove the titles in the individual dates within the calendar component of the datepicker?

Thanks,

Lara

Hello, Lara,

I`m glad to hear that most of the titles are handled.

As for the ones on the dates, this will require more customizations.

1) It will need a custom Calendar for the DatePicker:

https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/custom-rendering/#toc-customizing-the-calendar

2) Then the custom Calendar will need a custom CalendarCell that will be rendered without the title attribute:

https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/custom-rendering/

Custom Calendar without a title:

https://stackblitz.com/edit/react-otahqv?file=app/main.jsx

Regards,
Stefan
Progress Telerik

This worked perfectly. Thanks.

I am also trying to customize the title attributes of the 'Navigate to previous view' and 'Navigate to next view' of the DateRangePicker using the LocalizationProvider (following your first link), however I cannot find what field name I have to use to replace this.

Hello, Lara,

These buttons are actually part of the MultiViewCalendar used in the DateRangePicker.

These are the messages:

multiviewcalendar.prevView	Navigate to previous view
multiviewcalendar.nextView	Navigate to next view

Regards,
Stefan
Progress Telerik

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>
);

Hello, Lara,

Thank you for the provided additional code.

I saw two small details:

1) On the CalendarCell click event:

  handleClick = event => {
    this.props.onClick(this.props.value, event);
  };

https://www.telerik.com/kendo-react-ui/components/dateinputs/api/MultiViewCalendarProps/#toc-mode

export class CustomCalendar extends React.Component {
  render() {
    return (
      <MultiViewCalendar
        mode={this.props.mode}

Regards,
Stefan
Progress Telerik