Okay
  Public Ticket #2759751
Question about Date Picker
Closed

Comments

  • Dariusz Misiak started the conversation

    Hi there,

    1st. Please tell me where can i change date picker translation?

    And 2nd question, i have other problem. When I click on the date field on my page, try to edit row and the date picker is displayed after selecting the date, the date picker does not disappear. I have to click next to the date picker to make it disappear.

  •  2,507
    Aleksandar replied

    Hi again Dariusz

    1. Unfortunately, you will need to add your locale.

    This is an example for German/

    1. Open ../wp-content/plugins/wpdatatables/assets/js/wpdatatables/wdt.funcs.js and add this code under the comments "Apply datetimepicker" around line 147:

    moment.locale('de', {
            months : ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],
            monthsShort : ["jan", "feb", "mär", "apr", "mai", "jun", "jul", "aug", "sep", "okt", "nov", "dez"],
            weekdaysMin : ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
            week : {
            dow : 1 // Monday is the first day of the week
            }});

    Then, below that find this line of code around line 169:

    $(this).datetimepicker(
                {
                    format: wdtDateFormat + ' ' + wdtTimeFormat,
                    showClear: true,
                    keepOpen: true,
                    useCurrent: false
                }
            )

    And modify it to look like this (add "locale: 'de' "):

    $(this).datetimepicker(
                {
                    format: wdtDateFormat,
                    showClear: true,
                    keepOpen: true,
                    useCurrent: false,
                    locale: 'de'
                }
            )

    Do not forget to add a comma ( , ) after " useCurrent: false " (see code above). If you forget that, this will not work.

    Then, do the same for around line 183 (add "locale: 'de' "):

    $(this).datetimepicker(
                {
                    format: wdtDateFormat,
                    showClear: true,
                    keepOpen: true,
                    useCurrent: false,
                    locale: 'de'
                }
            )
                .off('dp.show')
                .on('dp.show', function () {
                    $(this).parent().find('div.bootstrap-datetimepicker-widget').addClass('wdt-datetimepicker-modal');
                    if (!_.contains(['MM/Y','MMM Y','Y'], wdtDateFormat)) {
                        wdtAddDatePlaceholders($(this));
                    }
                });
        });

    Again, do not forget to add a comma ( , ) after " useCurrent: false " (see code above). If you forget that, this will not work.

    2. Open ../wp-content/plugins/wpdatatables/source/class.wdttools.php and around line 1469 add the following line of code:

    wp_enqueue_script('wdt-moment-de', WDT_JS_PATH . 'moment/locale/de.js', array(), false, true);

    So it should look like this in the end:

    wp_enqueue_script('wdt-moment', WDT_JS_PATH . 'moment/moment.js', array(), WDT_CURRENT_VERSION, true);
    wp_enqueue_script('wdt-moment-de', WDT_JS_PATH . 'moment/locale/de.js', array(), false, true);
    wp_enqueue_script('wdt-bootstrap-datetimepicker', WDT_JS_PATH . 'bootstrap/bootstrap-datetimepicker/

    This also changes the date picker starting day, so the week starts from Monday, not Sunday.

    3. Open this file: 

    wp-content/plugins/wpdatatables/assets/js/wpdatatables/wdt.frontend.min.js

    Since this is a minified file, you have to search for the following line of code:

    $(this).datetimepicker({format:wdtDateFormat,showClear:!0,keepOpen:!0,useCurrent:!1})

    and change it to look like this:

    $(this).datetimepicker({format:wdtDateFormat,showClear:!0,keepOpen:!0,useCurrent:!1,locale:'de'})

    The last step is to go to the main settings of wpDataTables, under Custom JS and CSS  tab, and disable the "Use minified wpDataTables Javascript" check-box.

    2. At the moment, this is the default behavior of the picker, since it's generated from a 3rd party HTML5 library, so we can't change it at the moment, but I will forward this to our developers, so they can work on it in the future.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables