Title attribute on DatePickers

9 posts, 0 answers
  1. Lara Marie
    Lara Marie avatar
    18 posts
    Member since:
    Oct 2019

    Posted 04 Dec 2019 Link to this post

    Hi,

    I am trying to either customize the default tooltip that pops up when hovering over items with the title attribute (like the date input, icon on the dateinput, dates in the date picker, etc.) or remove the title attribute completely to avoid the tooltip from displaying?

    How can I achieve this please?

    Thanks,

    Lara

  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 04 Dec 2019 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Lara Marie
    Lara Marie avatar
    18 posts
    Member since:
    Oct 2019

    Posted 05 Dec 2019 in reply to Stefan Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 05 Dec 2019 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Lara Marie
    Lara Marie avatar
    18 posts
    Member since:
    Oct 2019

    Posted 05 Dec 2019 in reply to Stefan Link to this post

    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.

  6. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 09 Dec 2019 Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Lara Marie
    Lara Marie avatar
    18 posts
    Member since:
    Oct 2019

    Posted 16 Dec 2019 in reply to Stefan Link to this post

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

  8. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 17 Dec 2019 Link to this post

    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);
      };
    2) Also, the mode of the MultiViewCalendar has to be set(it is inside the props):

    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}
    I applied the changes to the code and it is working as expected on my end:

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

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Lara Marie
    Lara Marie avatar
    18 posts
    Member since:
    Oct 2019

    Posted 17 Dec 2019 in reply to Stefan Link to this post

    Thanks for your great answer! 
Back to Top