We're Moving to a New Support Platform – Starting June 1st!

We’re excited to let you know that starting June 1st, we’ll be transitioning to a new support system that will be available directly on our product websites – Amelia, wpDataTables, and Report Builder. In fact, the new support platform is already live for Amelia and wpDataTables, and we encourage you to reach out to us there.

You'll always be able to reach us through a widget in the bottom right corner of each website, where you can ask questions, report issues, or simply get assistance.

While we still do not offer live support, a new advanced, AI-powered assistant, trained on our documentation, use cases, and real conversations with our team, is there to help with basic to intermediate questions in no time.

We're doing our best to make this transition smooth and hassle-free. After June 1st, this current support website will redirect you to the new "Contact Us" pages on our product sites.

Thanks for your continued support and trust – we’re excited to bring you an even better support experience!

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,576
    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