Easy way to show calendar input in your language and display the value in your language

Easy way to show calendar input in your language and display the value in your language

We generally use jQuery datepicker or calendar to accept date input in our website. The language of such datepickers are set to English. Sometimes we need to change the language of the calendar rendered by the jQuery datepicker because our site is set-up in the different language.

Here is an easy solution to use jQuery datepicker or calendar in your own language.

#Changing the language of Calandar Input

Suppose we have a input field for the datepicker as:

<input type="text" class="datepicker" name="date" id="date">

We first need to enqueue the jquery-ui-i18n.min.js. This is the main library file for the language.
wp_enqueue_script( "i18n","//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js" );

Now, use the datepicker() function to make the above input field ready.


var options = $.extend(
{}, // empty object
$.datepicker.regional["fr"], // fr regional
{ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true } // your custom options
);
$(".datepicker").datepicker(options);

Note the class name of the above text field and the class used in the datepicker() function.

This will change the default english language of the datepicker to French.

#How to display the date in other language?

I had a WordPress plugin which language was English and one of my client wanted the date in another language. Specifically a month name and In that he wanted to localize month name and WordPress inbuilt functions does not support localized date format.

We can just simply handled this date issue with the use of setlocale() function.

string setlocale ( int $category ,string $locale [,string $... ] )

Let’s take one example which shows the difference if you switch from US locale (standard) to French locale.

setlocale (LC_ALL, "de_FR"); //Setting the locale to French

Once we set a locale, all the calls to the translator function will return strings according to the set locale value and we can set it with the use of strftime function.

Basic SYNTAX of strftime

string strftime ( string format [,int timestamp] )

So, Let’s see one example for strftime which display date according to setlocale language

<?php echo strftime( "%h %y",strtotime("2011-12-22")); // Prints ‘Déc 2011’ month is in French ?>

Leave comment

Your email address will not be published. Required fields are marked with *.