Support » Plugin: The Events Calendar » Bug report: datepicker not being translated

  • Resolved becleung

    (@becleung)


    I looked at the code in the file
    Tribe__Events__Asset__Bootstrap_Datepicker.php
    I see it says
    wp_localize_script( $handle, 'tribe_bootstrap_datepicker_strings', array( 'dates' => $localized_datepicker_array ) );

    I’m guessing I’m supposed to see

    /* <![CDATA[ */
    var tribe_bootstrap_datepicker_strings

    in my source code with all the translated strings, but it is not there. So the datepicker is defaulting to English. Just as these lines in tribe-events.js tells it to do:

    	if ( "undefined" !== typeof tribe_bootstrap_datepicker_strings && tribe_bootstrap_datepicker_strings.dates != null ) {
    		$.fn.bootstrapDatepicker.dates['en'] = tribe_bootstrap_datepicker_strings.dates;
    	}

    Dynamic help text, on the other hand, is working perfectly fine. I see its data, and it is translated when I change the language.

    /* <![CDATA[ */
    var tribe_dynamic_help_text

    This is with the latest version of The Events Calendar. I even tried using a completely fresh install of WordPress with The Events Calendar the only plugin installed, and just changing the language in WordPress settings – same results in all cases. The datepicker always defaults to English.

Viewing 7 replies - 1 through 7 (of 7 total)
  • becleung

    (@becleung)

    Okay, on closer inspection, Tribe__Events__Asset__Bootstrap_Datepicker.php has been deprecated, so it’s probably not directly causing this issue.

    I cobbled something together to force datepicker to translate. There has to be better ways to do this, but this was the best I could come up with for now. So if you know a better way, please share.

    For what it’s worth, I have The Events Calendar version 4.6.22.1 and WPML Multilingual CMS version 4.0.6

    First I downloaded the “bootstrap-datepicker.zh-TW.js” file from https://github.com/uxsolutions/bootstrap-datepicker/tree/master/js/locales and renamed it “bootstrap-datepicker.zh-HK.js”

    Then I changed the script inside this file to:

    if (tribe_bootstrap_datepicker_zh_strings.current_icl_language_code == 'zh') {
    
    ;(function($){
    	$.fn.datepicker.dates['zh-HK'] = {
    		days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
    		daysShort: ["週日", "週一", "週二", "週三", "週四", "週五", "週六"],
    		daysMin:  ["日", "一", "二", "三", "四", "五", "六"],
    		months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    		monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    		today: "今天",
    		format: "yyyy年mm月dd日",
    		weekStart: 1,
    		clear: "清除"
    	};
    }(jQuery));
    
    } else {
    
    ;(function($){
    	$.fn.datepicker.dates['zh-HK'] = {
    		days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    		daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    		daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
    		months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    		monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    		today: "Today",
    		monthsTitle: "Months",
    		clear: "Clear",
    		weekStart: 1,
    		format: "dd/mm/yyyy"
    	};
    }(jQuery));
    
    }

    I put this in plugins/the-events-calendar/vendor/bootstrap-datepicker/js

    I open bootstrap-datepicker.min.js from that same directory, and changed language:"en" to language:"zh-HK"

    I open the Assets.php file in plugins/the-events-calendar/src/Tribe and changed
    array( 'tribe-events-bootstrap-datepicker', 'vendor/bootstrap-datepicker/js/bootstrap-datepicker.js', array( 'jquery' ) ),
    to

    array( 'tribe-events-bootstrap-datepicker', 'vendor/bootstrap-datepicker/js/bootstrap-datepicker.js', array( 'jquery' ) ),
    array( 'tribe-events-bootstrap-datepicker-zh', 'vendor/bootstrap-datepicker/js/bootstrap-datepicker.zh-HK.js', array( 'tribe-events-bootstrap-datepicker' ) ),

    I added this to my theme’s functions.php:

    // TRANSLATE DATE PICKER
    wp_register_script( 'tribe-events-bootstrap-datepicker-zh', '/wp-content/plugins/the-events-calendar/vendor/bootstrap-datepicker/js/bootstrap-datepicker.zh-HK.js' );
    // Localize the script with new data
    $translation_array = array(
    		'current_icl_language_code' => ICL_LANGUAGE_CODE
    );
    wp_localize_script( 'tribe-events-bootstrap-datepicker-zh', 'tribe_bootstrap_datepicker_zh_strings', $translation_array );
    becleung

    (@becleung)

    Oh, almost forgot, I had to add
    'tribe-events-bootstrap-datepicker-zh', after 'tribe-events-bootstrap-datepicker', at lines 183 199 and 289 in Assets.php

    That’s a pretty important step.

    And here’s some docs on how translation works for bootstrap datepicker:
    https://bootstrap-datepicker.readthedocs.io/en/latest/i18n.html?highlight=translation

    becleung

    (@becleung)

    Just for reference, I tried this in my theme’s functions.php (without changing anything else)

    // TRANSLATE DATE PICKER
    wp_register_script( 'tribe-events-bootstrap-datepicker', '/wp-content/plugins/the-events-calendar/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js' );
    // Localize the script with new data
    $translation_array = array(
    	'dates' => array (
    		'days'              => array(
    				__( 'Sunday' ),
    				__( 'Monday' ),
    				__( 'Tuesday' ),
    				__( 'Wednesday' ),
    				__( 'Thursday' ),
    				__( 'Friday' ),
    				__( 'Saturday' ),
    			),
    		'daysShort'         => array(
    				__( 'Sun' ),
    				__( 'Mon' ),
    				__( 'Tue' ),
    				__( 'Wed' ),
    				__( 'Thu' ),
    				__( 'Fri' ),
    				__( 'Sat' ),
    			),
    		'months'            => array(
    				__( 'January' ),
    				__( 'February' ),
    				__( 'March' ),
    				__( 'April' ),
    				__( 'May' ),
    				__( 'June' ),
    				__( 'July' ),
    				__( 'August' ),
    				__( 'September' ),
    				__( 'October' ),
    				__( 'November' ),
    				__( 'December' ),
    			),
    		'monthsShort'       => array(
    				__( 'Jan' ),
    				__( 'Feb' ),
    				__( 'Mar' ),
    				__( 'Apr' ),
    				__( 'May' ),
    				__( 'Jun' ),
    				__( 'Jul' ),
    				__( 'Aug' ),
    				__( 'Sep' ),
    				__( 'Oct' ),
    				__( 'Nov' ),
    				__( 'Dec' ),
    			),
    	)
    );
    wp_localize_script( 'tribe-events-bootstrap-datepicker', 'tribe_bootstrap_datepicker_strings', $translation_array );

    And it produced data beautifully, I can see it translates when I view source.
    Here it is on English pages:

    /* <![CDATA[ */
    var tribe_bootstrap_datepicker_strings = {"dates":{"days":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"daysShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"months":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthsShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}};
    /* ]]> */

    And here it is on Chinese pages:

    /* <![CDATA[ */
    var tribe_bootstrap_datepicker_strings = {"dates":{"days":["\u661f\u671f\u65e5","\u661f\u671f\u4e00","\u661f\u671f\u4e8c","\u661f\u671f\u4e09","\u661f\u671f\u56db","\u661f\u671f\u4e94","\u661f\u671f\u516d"],"daysShort":["\u9031\u65e5","\u9031\u4e00","\u9031\u4e8c","\u9031\u4e09","\u9031\u56db","\u9031\u4e94","\u9031\u516d"],"months":["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","5\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"],"monthsShort":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"]}};
    /* ]]> */

    But the datepicker just turns into a box with no text. No good. I’m missing something to connect that text to datepicker, and I have no idea what it could be.

    becleung

    (@becleung)

    Tried again because I thought the problem was I forgot to put “clear” and “today” at the end. But nope. Makes no difference. Still blank.

    // TRANSLATE DATE PICKER
    wp_register_script( 'tribe-events-bootstrap-datepicker', '/wp-content/plugins/the-events-calendar/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js' );
    // Localize the script with new data
    $translation_array = array(
    	'dates' => array (
    		'days'              => array(
    				__( 'Sunday' ),
    				__( 'Monday' ),
    				__( 'Tuesday' ),
    				__( 'Wednesday' ),
    				__( 'Thursday' ),
    				__( 'Friday' ),
    				__( 'Saturday' ),
    			),
    		'daysShort'         => array(
    				__( 'Sun' ),
    				__( 'Mon' ),
    				__( 'Tue' ),
    				__( 'Wed' ),
    				__( 'Thu' ),
    				__( 'Fri' ),
    				__( 'Sat' ),
    			),
    		'months'            => array(
    				__( 'January' ),
    				__( 'February' ),
    				__( 'March' ),
    				__( 'April' ),
    				__( 'May' ),
    				__( 'June' ),
    				__( 'July' ),
    				__( 'August' ),
    				__( 'September' ),
    				__( 'October' ),
    				__( 'November' ),
    				__( 'December' ),
    			),
    		'monthsShort'       => array(
    				__( 'Jan' ),
    				__( 'Feb' ),
    				__( 'Mar' ),
    				__( 'Apr' ),
    				__( 'May' ),
    				__( 'Jun' ),
    				__( 'Jul' ),
    				__( 'Aug' ),
    				__( 'Sep' ),
    				__( 'Oct' ),
    				__( 'Nov' ),
    				__( 'Dec' ),
    			),
    	'clear' => 'Clear',
    	'today' => 'Today'
    	),
    );
    wp_localize_script( 'tribe-events-bootstrap-datepicker', 'tribe_bootstrap_datepicker_strings', $translation_array );
    Plugin Support Ed

    (@erishel)

    Hey there !

    Thanks for reaching out — sorry to hear that you are experiencing difficulties and the wait here, we’ve been extra busy lately.

    This is pretty strange, I’m going to try a few things and make sure that I can reproduce this. In the meantime, I’ll leave you with some links, but it sounds like you’ve got things covered pretty well.

    Translating The Events Calendar
    https://theeventscalendar.com/knowledgebase/how-to-override-plugin-language-files/
    Customizing any text/string

    Take care,
    Ed ✌️

    Plugin Support Ed

    (@erishel)

    Hey there,

    Since this thread has been inactive for a while, I’m going to go ahead and mark it as resolved. Don’t hesitate to create a new thread any time you help again!

    Ed ✌

    I have the same problem. I can’t understand why it remains in english! https://network.nlg.gr/events/

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Bug report: datepicker not being translated’ is closed to new replies.