Localization of the Date Picker and Date Format

Gravity Support Forums » Plugin Support » Gravity Forms

danielck
Member

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 14 years ago on Thursday January 21, 2010 | Permalink
fuhrmara
Member

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

Posted 14 years ago on Thursday January 21, 2010 | Permalink
Alex Cancado
Administrator

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 14 years ago on Thursday January 21, 2010 | Permalink
fuhrmara
Member

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

Posted 14 years ago on Sunday January 24, 2010 | Permalink
Carl Hancock
Administrator

Currently the time format is in the 12 hour format. Although we do plan on enhancing this in a future release.

Posted 14 years ago on Monday January 25, 2010 | Permalink
Alex Cancado
Administrator
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 14 years ago on Thursday February 4, 2010 | Permalink
Alex Cancado
Administrator

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 14 years ago on Thursday February 4, 2010 | Permalink
danielck
Member

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 14 years ago on Wednesday February 10, 2010 | Permalink
oziegler
Member

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 14 years ago on Friday April 9, 2010 | Permalink
Carl Hancock
Administrator

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 14 years ago on Sunday April 11, 2010 | Permalink
jhayes4
Member

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

Posted 14 years ago on Sunday April 18, 2010 | Permalink
pettedemon
Member

How the week can start on Monday?

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

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

Posted 13 years ago on Friday January 28, 2011 | Permalink
Piet
Member

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 13 years ago on Friday June 17, 2011 | Permalink
Carl Hancock
Administrator

@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 13 years ago on Friday June 17, 2011 | Permalink
Piet
Member

@Carl, thanks for your reply, will do that with a conditional from WPML then. Glad to know it can work like that!

Posted 13 years ago on Saturday June 18, 2011 | Permalink
Prime
Member

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 13 years ago on Wednesday November 9, 2011 | Permalink
Chris Hajer
Key Master

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 13 years ago on Wednesday November 9, 2011 | Permalink
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 12 years ago on Monday February 20, 2012 | Permalink
quokka
Member

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

Posted 12 years ago on Tuesday February 21, 2012 | Permalink
Twana
Member

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 12 years ago on Tuesday February 21, 2012 | Permalink
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 12 years ago on Tuesday February 21, 2012 | Permalink
reego
Member

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 12 years ago on Saturday April 28, 2012 | Permalink
Alex Cancado
Administrator
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 12 years ago on Friday September 7, 2012 | Permalink
Elena
Member

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 11 years ago on Tuesday January 29, 2013 | Permalink
Chris Hajer
Key Master

Can you show us the page on your site where you tried this so we can see how it was done? Thank you.

Posted 11 years ago on Tuesday January 29, 2013 | Permalink
Elena
Member

Hi Chris

http://aumentomamas.com

Thanks!

Posted 11 years ago on Friday February 1, 2013 | Permalink

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 11 years ago on Saturday February 2, 2013 | Permalink