DateTimePicker and DatePicker Displaying Odd Images

[Matt]

When we instantiate both DatePickers and DateTimePickers, there appears to be a phantom image (what looks like an "S") overlaying the calendar and clock icons as shown in the example below:

I've played around with the classes that are associated with the spans in which the icons are located, but am unable to locate the source of the phantom images.  Any ideas would be greatly appreciated!

 

Here's the code we use to implement both (where $(this) is the specific control :

                $(this).kendoDateTimePicker({
                    format: "MM/dd/yyyy hh:mm:ss tt",
                    value: savedStartDate,
                    min: savedStartDate,
                    change: startDateTimeChangeRange
                });

                if (reloadPreviousModel && previousModel) {
                    $(this).val(previousModel[counter].StartDate);
                }
                $('.datetimeFromcontrol').find('.k-i-calendar').attr('aria-label', 'Select start date');
                $('.datetimeFromcontrol').find('.k-i-clock').attr('aria-label', 'Select start time');
              

We recently upgraded from an older version of Telerik (2017 to 2022) and didn't have this issue in the older version.  Inspecting the elements, I can't find anything that seems out of the ordinary, but have included the generated markup below:

<span class="k-datetimepicker k-input datetimeTocontrol k-input-solid k-input-md k-rounded-md" style="">
<input aria-label="Proxy end date" class="datetimeTocontrol k-input-inner" data-savedenddate="" data-val="true" data-val-date="The field EndDate must be a date." data-val-required="The EndDate field is required." id="datetimepickerTo_row1" name="PreferencesList[3].Controls[0].ProxyList[0].EndDate" title="Proxy end date" type="text" value="1/1/0001 12:00:00 AM" data-role="datetimepicker" role="combobox" aria-expanded="false" aria-haspopup="grid" aria-controls="datetimepickerTo_row1_dateview datetimepickerTo_row1_timeview" autocomplete="off">
<button tabindex="-1" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the time view" type="button" unselectable="on">
<span class="k-icon k-i-clock k-button-icon" aria-label="Select end time" title="Select proxy end time">Select proxy end time</span>
</button>
<button unselectable="on" tabindex="-1" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the date view" type="button">
<span class="k-icon k-i-calendar k-button-icon" aria-label="Select end date" title="Select proxy end date">Select proxy end date</span>
</button>
</span>

[Nikolay]

Hi Matt,

I am unable to reproduce this on my end and I am not sure what could be causing it. Do you have any custom CSS styles that might be affecting the DateTimePicker? 

What Kendo UI version did you upgrade to? From the shared HTML I can tell it's before 2023.2.606. Since the 2023.2.606 version, the icons are rendered as SVG and not as spans.

Is it possible to isolate and replicate this in a Dojo demo?

Regards,

Nikolay

[Matt]

Thanks for the input, Nikolay.  After inspecting (and playing around with) the elements further, I discovered that it didn't have anything to do with CSS, but instead the fact that we add the following as part of converting inputs to DatePickers or DateTimePickers:

$(this).find('span.k-i-calendar').html('@UserInterface.Preferences_Proxy_StartCalendarHTML_Text');
$(this).find('span.k-i-clock').html('@UserInterface.Preferences_Proxy_StartTimeHTML_Text');

...which can be seen in the original output as the following:

<button tabindex="-1" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the time view" type="button" unselectable="on">

<span class="k-icon k-i-clock k-button-icon" aria-label="Select end time" title="Select proxy end time">Select proxy end time</span>

</button>

<button unselectable="on" tabindex="-1" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the date view" type="button">

<span class="k-icon k-i-calendar k-button-icon" aria-label="Select end date" title="Select proxy end date">Select proxy end date</span>

</button>

As soon as I removed the "Select ..." from the HTML of both spans, the underlying "S" went away from the image.  This may be an artifact of the upgrade (from 2017 to 2022) since the code above hasn't changed for years on our end.  I'm guessing maybe there's a transparency CSS setting that's being applied but will need to investigate further to confirm, but at this point, at least I figured out where it's coming from (which will hopefully help any others in the same boat).

[Nikolay]

Hi Matt,

Thank you for the update.

It's a 5 yeard difference from the 2017 to 2022 versions and I recommend checking the Breaking Changes articles before upgrading the Kendo UI in the project:

https://docs.telerik.com/kendo-ui/backwards-compatibility/2023-backward-compatibility

Furthermore, in 2023 the span icons are replaced with SVG ones

Regards,

Nikolay