jQuery Datepicker UI language translation implementation

There are already localized versions of the jQuery Datepicker. The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.

http://jqueryui.com/datepicker/#localization

For a multiple language website, the easiest way to do it is by loading the related language file which contain the range of rationalization options. After that set the datapicker default:

Example the settings:

jQuery(function($){
	$.datepicker.regional['zh-CN'] = {
		closeText: '关闭',
		prevText: '<上月',
		nextText: '下月>',
		currentText: '今天',
		monthNames: ['一月','二月','三月','四月','五月','六月',
		'七月','八月','九月','十月','十一月','十二月'],
		monthNamesShort: ['一','二','三','四','五','六',
		'七','八','九','十','十一','十二'],
		dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
		dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
		dayNamesMin: ['日','一','二','三','四','五','六'],
		weekHeader: '周',
		dateFormat: 'yy-mm-dd',
		firstDay: 1,
		isRTL: false,
		showMonthAfterYear: true,
		yearSuffix: '年'};
	$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});

Two method to do this datapicker UI translation.
1. By loading language locale for jqueryui from google
2. By save and load the language locale file from local server or S3 strage.

method 1, example load language France:
Load the fr language files as below.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/i18n/jquery.ui.datepicker-fr.min.js"></script>

After that, set the datapicker default:

$.datepicker.setDefaults($.datepicker.regional['fr']);

Reference:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/MANIFEST

http://stackoverflow.com/questions/2418041/how-to-load-jqueryui-from-google-cdn-with-locale-different-than-english

http://stackoverflow.com/questions/10137392/datepicker-is-always-displayed-in-simplified-chinese

By Keenlio, March 11, 2014

What do you think?

Leave a Reply

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


+ five = 10

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>