Gravity Forms “datepicker” in het Nederlands

De Gravity Forms “datepicker” maakt gebruik van de jQuery UI datepicker. De teksten in deze datepicker zjin standaard in het Engels. De .po en .mo vertaal bestanden van Gravity Forms vertalen deze teksten helaas niet. Dit heeft te maken met dat de jQuery UI bibliotheek op een andere manier om gaat met vertalingen dan WordPress. Meer informatie hierover is te lezen op de i18n wiki pagina van de jQuery UI bibliotheek. De Nederlandse jQuery UI datepicker vertalingen zijn gelukkig gewoon beschikbaar in de jQuery UI code repository.

Voor het gemak kun je de vertaling ook downloaden vanaf mijn website. Zodra je dit bestand hebt gedownload moet je binnen je WordPress theme nog een koppeling maken naar dit bestand. Hiervoor plaats je het bestand in de volgende locatie binnen je theme:

httpdocs\wp-content\themes\je-eigen-theme-map\scripts\jquery.ui.datepicker-nl.js

De meeste logisch stap is om binnen je header.php bestand een link te maken naar dit bestand.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.ui.datepicker-nl.js"></script>

In eerste lijkt dit goed te werken, maar helaas resulteert dit in bepaalde gevallen in JavaScript fouten. Zodra je namelijk een Gravity Forms formulier zonder datepicker gebruikt zul je de volgende foutmelding krijgen.

$.datepicker is undefined
/wp-content/themes/je-eigen-theme-map/scripts/jquery.ui.datepicker-nl.js
Line 4

Dit komt doordat Gravity Forms de datepicker scripts alleen toevoegt zodra deze nodig zijn. Dit is terug te zien in het volgende bestand van de Gravity Forms plugin:

httpdocs\wp-content\plugins\gravityforms\form_display.php

if(self::has_date_field($form)){
	wp_enqueue_script("gforms_ui_datepicker", GFCommon::get_base_url() . "/js/jquery-ui/ui.datepicker.js", array("jquery"), GFCommon::$version, true);
	wp_enqueue_script("gforms_datepicker", GFCommon::get_base_url() . "/js/datepicker.js", array("gforms_ui_datepicker"), GFCommon::$version, true);
	$jquery_enqueued = true;
}

Om die reden kun je beter controleren of de “gforms_ui_datepicker” JavaScript wordt gebruikt. Vervolgens kun je het script met de Nederlandse vertaling toevoegen. In het volgende code fragment is te zien hoe je dit doet:

/**
 * Gravity forms translate datepicker
 */
function custom_translate_datepicker() {
	if(wp_script_is('gforms_ui_datepicker')) {
		wp_enqueue_script('gforms_ui_datepicker_nl', get_bloginfo('template_directory') . '/scripts/jquery.ui.datepicker-nl.js', array('gforms_ui_datepicker'), false, true);
	}
}

add_action('wp_print_scripts', 'custom_translate_datepicker');

Bovenstaande code kun je toevoegen aan het bestand functions.php binnen je theme.

6 gedachten over “Gravity Forms “datepicker” in het Nederlands

  1. Je gebruikt hier template_directory om naar je theme-map te verwijzen. Dit werkt echter niet als je met een child-theme werkt. Hij gaat dan naar de map van je parenttheme Dan kun je beter stylesheet_directory gebruiken. Dan pakt hij de url naar je childtheme.
    Hoe kun je dit trouwens goed regelen als je een meertalige website hebt? In mijn geval Nederlands, Engels en Duits?

      1. Mooi dat de datumpicker wel het goede format neerzet maar als je de formulieren gaat exporteren, krijg je ze nog steeds in het verkeerder format (yyyy-mm-dd ipv dd-mm-yyyy).

        Iemand enig idee waar dat aangepast moet worden?

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

De volgende HTML tags en attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>