PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Localization of the Date Picker and Date Format

  1. Hi, I'm using the Date Picker in a form, and would need both the date picker localized (month names, start of week from sunday to monday) and the date format too. In Finland we use dots instead of slashes (DD.MM.YYYY). Is this possible with a filter?

    Posted 10 years ago on Thursday January 21, 2010 | Permalink
  2. fuhrmara
    Member

    I'm also interesting in this.
    I'm from germany. And we also have an other format.

    Posted 10 years ago on Thursday January 21, 2010 | Permalink
  3. The jQuery UI datepicker that we use can be localized, but I am not sure yet if you can do it from within Gravity Forms.
    I will do some more research on this and get back to you.

    Posted 10 years ago on Thursday January 21, 2010 | Permalink
  4. fuhrmara
    Member

    For some countries it's also required to switch between the 12-hour and 24-hour time-format.
    Is this possible ?

    Posted 10 years ago on Sunday January 24, 2010 | Permalink
  5. Currently the time format is in the 12 hour format. Although we do plan on enhancing this in a future release.

    Posted 10 years ago on Monday January 25, 2010 | Permalink
  6. To change the datepicker to a different language, do the following:
    1- Download the translation from jQuery UI. Choose version 1.7.2 and uncheck all products except the Datepicker. This will give you a zip file and the translations will be in it under the folder: development-bundle\ui\i18n

    2- Include the translation file to your page (I am using the French translation as an example)
    <script type="text/javascript" src="your_themes_js_folder/ui.datepicker-fr.js"></script>
    IMPORTANT: the translation file needs to be included in the page AFTER the ui.datepicker.js file that is included by Gravity Forms in the footer.

    3- Add the following code after the include above

    jQuery(document).ready(
        function() {
            jQuery('.datepicker').datepicker('option', jQuery.extend({showMonthAfterYear: true}, jQuery.datepicker.regional['fr']));
        }
    );

    NOTE: you will need to replace 'fr' above with your language code.

    Posted 10 years ago on Thursday February 4, 2010 | Permalink
  7. Changing the date format won't be possible because Gravity Forms rely on the slashes (/) in the back end.
    It would be possible to change the format on the form only (users submitting the form will see the new format), and then using a hook to re-format the date before it gets inserted into the database. That way, website users will see the date in the right format, but administrators will see the dates in the "wrong" format when browsing entries in the admin.
    If that sounds like an acceptable solution, I can come up with a code snippet

    Posted 10 years ago on Thursday February 4, 2010 | Permalink
  8. Thanks for the tips regarding formatting!

    Actually, thinking over the date format, it would be better if GF used ISO-formatted dates (YYYY-MM-DD) internally regardless of the format used for input, because sorting (when used with custom fields) will work only with the ISO format. Or at least offer YYYY/MM/YY as a format option. What I'm doing now is having users submit the date in the form DD/MM/YYYY, then turning it around with a pre-save hook into YYYY/MM/DD before it is entered into a custom field. I'm then using these custom fields to sort Event-related posts by event date, and then reversing the date for display purposes as DD.MM.YYYY

    :)

    Posted 10 years ago on Wednesday February 10, 2010 | Permalink
  9. If I require a dd.mm.yyyy format to be saved with the new post that is created from a form submit, how can I do that?

    Will there be more date format option in upcoming (maybe next?) releases?

    Posted 10 years ago on Friday April 9, 2010 | Permalink
  10. There are currently no plans to update the date field in the next release. However, it is possible for you to store the data this way using an API hook to transform the information. We will most likely change to an ISO format with an option the overall plugin settings on how to display the date. But this is going to require more development and we are already wrapping up the next release.

    Posted 10 years ago on Sunday April 11, 2010 | Permalink
  11. jhayes4
    Member

    one more vote here for allowing the YYYY-MM-DD format - makes it much easier for sorting purposes.

    Posted 10 years ago on Sunday April 18, 2010 | Permalink
  12. pettedemon
    Member

    How the week can start on Monday?

    Posted 9 years ago on Friday January 28, 2011 | Permalink
  13. pampaeus
    Member

    one more vote here for allowing the YYYY-MM-DD format - makes it much easier for sorting purposes. thanks

    Posted 9 years ago on Friday January 28, 2011 | Permalink
  14. So I used this great tip to change the date-picker into Dutch on my bilingual website, but now the English contact form also shows the Dutch dates. Is it possible to have Dutch format for the Dutch language and English format for the English language?

    Posted 8 years ago on Friday June 17, 2011 | Permalink
  15. @Piet That jQuery is going to change any instance of the datepicker on the page where that custom jQuery resides. So you'd have to place that custom jQuery only on the pages that contain the datepicker that you want to customize.

    Posted 8 years ago on Friday June 17, 2011 | Permalink
  16. @Carl, thanks for your reply, will do that with a conditional from WPML then. Glad to know it can work like that!

    Posted 8 years ago on Saturday June 18, 2011 | Permalink
  17. Hi, this works great. Only problem is, I get a javascript error on every page that doesn't use a form with the datepicker. Can anyone point me towards a solution?

    Posted 8 years ago on Wednesday November 9, 2011 | Permalink
  18. You need to CONDITIONALLY include the script on pages where it's needed. Pages where the datepicker is in use and you want this functionality. How did you include the script so far? What file did you add it to?

    Posted 8 years ago on Wednesday November 9, 2011 | Permalink
  19. quokka
    Member

    Hi,

    Need this too as my forms are in Dutch.
    Any idea how to include the language javascript conditionally, preferrable with a GF hook or something clean.

    Any suggestions are highly appreciated...
    Thanks in advance!

    Posted 8 years ago on Monday February 20, 2012 | Permalink
  20. quokka
    Member

    Nobody dealed with this before? Hopefully someone can share some code :)
    Thanks!

    Posted 8 years ago on Tuesday February 21, 2012 | Permalink
  21. Hi Quokka,

    I just edited the file "ui.datepicker.js" . Which you can find in here "wp-content\plugins\gravityforms\js\jquery-ui"

    See below the modification to Dutch.
    Hope this will work for you two.

    Cheers,
    Twana
    -------------
    monthNames: ['Januari','Februari','Maart','April','Mei','Juni',
    'Juli','Augustus','September','Oktober','November','December'], // Names of months for drop-down and formatting
    monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'], // For formatting
    monthStatus: 'Show a different month', // Status text for selecting a month
    yearStatus: 'Show a different year', // Status text for selecting a year
    weekHeader: 'Wk', // Header for the week of the year column
    weekStatus: 'Week of the year', // Status text for the week of the year column
    dayNames: ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'], // For formatting
    dayNamesShort: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'], // For formatting
    dayNamesMin: ['Zo','Ma','Di','Wo','Do','Vr','Za'], // Column headings for days starting at Sunday
    dayStatus: 'Set DD as first week day', // Status text for the day of the week selection

    Posted 8 years ago on Tuesday February 21, 2012 | Permalink
  22. quokka
    Member

    Hi Twana,
    Thanks.. Knew that was possible but preferred the other way because this might not be update-proof. But I think I am going to use your solution anyways and just check after updates if it's still working. Think your solution is the fastest way to do it instead of finding out how to hook into GF.. Think it's a pitty that this part of GF isn't multi-language out of the box.. But what the heck, GF still rocks big time :)
    Thanks again Twana!

    Posted 8 years ago on Tuesday February 21, 2012 | Permalink
  23. Hello,
    Thank you for this thread but I really don't know anything about programming, so your explanations about changing language of the date picker are not really clear to me.
    So far, I've downloaded the js file with the translation but I am lost right after that.

    Step 2 - Include the translation file to your page (I am using the French translation as an example) :" which page do I have to include this : <script type="text/javascript" src="your_themes_js_folder/ui.datepicker-fr.js"></script> ?

    And 3 : Add the following code after the include above...same thing...where ?

    Could somebody help me with this, with clear explanations, without using semantic shortcuts only known by programmers ?
    Thank you very much.

    Posted 8 years ago on Saturday April 28, 2012 | Permalink
  24. After you have dowloaded the file, upload it to your theme's folder.
    Then add an HTML field to your form and paste the following code into that field's content.
    NOTE: replace "your_theme_folder" with the actual path to your theme's folder and replace 'fr' with your actual language code.

    <script type="text/javascript" src="your_themes_folder/ui.datepicker-fr.js"></script>
    jQuery(document).ready(
        function() {
            jQuery('.datepicker').datepicker('option', jQuery.extend({showMonthAfterYear: true}, jQuery.datepicker.regional['fr']));
        }
    );
    Posted 7 years ago on Friday September 7, 2012 | Permalink
  25. Hi guys

    I just did what Alex Cancado says and it won't show the calendar in Spanish.
    I changed to theme path and changed FR to ES..

    :S

    Posted 7 years ago on Tuesday January 29, 2013 | Permalink
  26. Can you show us the page on your site where you tried this so we can see how it was done? Thank you.

    Posted 7 years ago on Tuesday January 29, 2013 | Permalink
  27. Hi Chris

    http://aumentomamas.com

    Thanks!

    Posted 7 years ago on Friday February 1, 2013 | Permalink
  28. Hi, i found a solutions!

    I need my site in english and spanish, so i do this:

    1- Download the translation from jQuery UI
    2-Copy spanish language to jquery.ui.datepicker-es.js to /wp-content/Name-Template/js/
    3-Edit the header file from template /wp-content/Name-Template/header.php
    4-Insert this code before </head>

    <!-- idiomas datapicker
    ================================================== -->
    <?php
    //detecto idioma del sitio
    $idioma = get_bloginfo('language');
    
    // si el idioma del sitio es espaƱol incluyo srcipt traducido
    if ($idioma == "es-ES") { ?>
    
    <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.ui.datepicker-es.js"></script>
    
    <script type="text/javascript">
    $j(document).ready(function(){
    var language = $j('html').attr('lang');
    switch(language)
    {
    case 'es-ES': //german language
    $j( "#datePicker1" ).datepicker( "option", $j.datepicker.regional[ 'es' ] );
    $j( "#datePicker2" ).datepicker( "option", $j.datepicker.regional[ 'es' ] );
    break;
    }
    });
    </script>
    <?php } ?>

    And is working!

    I hope you like!

    Posted 7 years ago on Saturday February 2, 2013 | Permalink