Change the name of calendar button icon from "select" to "Pick a date"

0 Answers 89 Views
Calendar Date/Time Pickers
Top achievements
Rank 1
Pratik asked on 22 Mar 2023, 03:47 PM | edited on 22 Mar 2023, 03:48 PM

I have just seen the demo about using kendo DatePicker. But when inspect the calendar icon under Accessibility menu I can see the Default name for the button is given as "select". I would like to change the name of button from "select" to "Pick a date". Please Guide through. I have attached image for your reference.

Following is the code snippet:

<!DOCTYPE html>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href=""/>

    <script src=""></script>
    <script src=""></script>
    <input id="datePicker" />

            value: new Date(2022, 0, 3),
            min: new Date(2022, 0, 1),
            max: new Date(2022, 5, 30),
            weekNumber: true,
            format: "yyyy-MM-dd"
Telerik team
commented on 27 Mar 2023, 10:30 AM

Hi Pratik,

Currently, the rendering of the button is as follows: 

<button aria-label="select" tabindex="-1" class="k-input-button k-button k-icon-button k-button-md k-button-solid k-button-solid-base" type="button" role="button"><span class="k-icon k-i-calendar k-button-icon"></span></button>

It has aria-label, but it does not have name set. Please let me know if I am missing something.

However, if you need to set name to the element you can use the jQuery attr() method as demonstrated below:

$("#datePicker").parent('.k-datepicker').find('.k-button').attr('name', 'custom')

Here is a small dojo example. 

I hope this helps.



No answers yet. Maybe you can help?

Calendar Date/Time Pickers
Asked by
Top achievements
Rank 1
Share this question