Stopping google translate from translating datepicker

Question

http://jsfiddle.net/tkRaQ/51/

The "addClass" here: $(".datepicker").datepicker().addClass('notranslate'); doesn't fix it.... (google translation stops the selection of dates from working)

For some reason the other code fixes it:

$("#fix").click(function() {
    $('.ui-datepicker').addClass('notranslate');
});

Is there a way of stopping the translation without #fix.click?

Answer 1

Your first line is adding the notranslate class to the input element that you're triggering the datepicker from.

The datepicker UI elements are different from the input field, and get created automatically at the end of the document. You can find them with the jqueryui class ui-datepicker (which you're already doing). However, they get created as soon as you configure the datepicker on your input field, so you can immediately follow your first line with a line that finds the automatically-created ui elements and adds the notranslate class to them (instead of putting it on a button click)

$(function() {
    $(".datepicker").datepicker();
    $('.ui-datepicker').addClass('notranslate');
});

Working fiddle is here: http://jsfiddle.net/J5buS/3/