#8266 closed bug (wontfix)

Opened April 20, 2012 11:29AM UTC

Closed July 16, 2012 01:37PM UTC

Last modified January 08, 2020 12:44PM UTC

Google Translate breaks datepicker

Reported by: eirc Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.datepicker Version: 1.8.19
Keywords: Cc:
Blocked by: Blocking:
Description

Using Google translate on a page breaks the datepicker which fills the fields with a value of "NaN/NaN/NaN".

A workaround is to add a 

notranslate
class to the datepicker which prevents Google Translate from breaking it. However I guess that a better solution would be to allow it to translate but not break :)

See http://jsfiddle.net/eirc/tkRaQ/

I also don't know if any other widgets are affected by this.

Attachments (0)
Change History (3)

Changed July 16, 2012 12:58PM UTC by mrozik comment:1

just tested it in FF 13.0.1 and it works. I opened this link:

http://translate.google.pl/translate?hl=pl&sl=auto&tl=pl&u=http%3A%2F%2Ffiddle.jshell.net%2Feirc%2FtkRaQ%2Fshow%2F&anno=2

Changed July 16, 2012 01:37PM UTC by scottgonzalez comment:2

resolution: → wontfix
status: new → closed

Google Translate doesn't follow any standards. I don't think we should be adding 3rd party classes to our widgets. If Google Translate ever supports a standard like @translate, then we can consider this. Out of curiosity, do you know what is getting translated that is killing the datepicker?

Changed January 08, 2020 12:44PM UTC by koendewit comment:3

The reason why the datepicker doesn't work is that Google Translate wraps all text in <font /> tags, including the day numbers of the calender.

These contents of a cell in the calendar table:

#!text/html
<a class="ui-state-default" href="#">14</a>

will be converted by Google Translate to:

#!text/html
<a class="ui-state-default" href="#">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">14</font>
    </font>
</a>

The result is that this line in the jQuery UI code will fail to find the number of the day clicked:

#!js
inst.selectedDay = inst.currentDay = $( "a", td ).html();

A possible workaround is to add the notranslate class to the datepicker div immediatly after creating the datepicker:

#!js
$("#id_of_date_field").datepicker();
$("#ui-datepicker-div").addClass("notranslate");