Google Translate breaks datepicker

[eirc]

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.

[mrozik]

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

[Scott González]

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?

[koendewit]

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:

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

will be converted by Google Translate to:

<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:

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:

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