0
# Internationalization
1

2
Built-in internationalization support with 40+ pre-configured locales and custom i18n options.
3

4
## Capabilities
5

6
### Global Locale Setting
7

8
Set the global locale that applies to all datetimepicker instances.
9

10
```javascript { .api }
11
/**
12
 * Set global locale for all instances
13
 * Available via $.datetimepicker.setLocale()
14
 */
15
$.datetimepicker.setLocale(locale: string): void;
16
```
17

18
**Usage Examples:**
19

20
```javascript
21
// Set German locale globally
22
$.datetimepicker.setLocale('de');
23

24
// All new instances will use German
25
$('#date1').datetimepicker(); // German month/day names
26
$('#date2').datetimepicker(); // German month/day names
27

28
// Switch to French
29
$.datetimepicker.setLocale('fr');
30
$('#date3').datetimepicker(); // French month/day names
31
```
32

33
### Custom Internationalization
34

35
Override or customize locale strings for specific instances.
36

37
```javascript { .api }
38
interface InternationalizationOptions {
39
    /** Custom internationalization strings */
40
    i18n?: {
41
        [locale: string]: LocaleDefinition;
42
    };
43
}
44

45
interface LocaleDefinition {
46
    /** Full month names (12 items) */
47
    months: string[];
48
    /** Short day names (7 items, starting with Sunday) */
49
    dayOfWeekShort: string[];
50
    /** Full day names (7 items, starting with Sunday) */
51
    dayOfWeek: string[];
52
}
53
```
54

55
**Usage Examples:**
56

57
```javascript
58
// Custom German locale
59
$('#custom-german').datetimepicker({
60
    i18n: {
61
        de: {
62
            months: [
63
                'Januar', 'Februar', 'März', 'April',
64
                'Mai', 'Juni', 'Juli', 'August',
65
                'September', 'Oktober', 'November', 'Dezember'
66
            ],
67
            dayOfWeekShort: [
68
                'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'
69
            ],
70
            dayOfWeek: [
71
                'Sonntag', 'Montag', 'Dienstag', 'Mittwoch',
72
                'Donnerstag', 'Freitag', 'Samstag'
73
            ]
74
        }
75
    }
76
});
77

78
// Custom English locale with abbreviated names
79
$('#short-english').datetimepicker({
80
    i18n: {
81
        en: {
82
            months: [
83
                'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
84
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
85
            ],
86
            dayOfWeekShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
87
            dayOfWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
88
        }
89
    }
90
});
91
```
92

93
### Supported Locales
94

95
Pre-configured locales available out of the box.
96

97
```javascript { .api }
98
type SupportedLocale = 
99
    | 'ar'     // Arabic
100
    | 'bg'     // Bulgarian
101
    | 'bs'     // Bosnian
102
    | 'ca'     // Catalan
103
    | 'ch'     // Chinese
104
    | 'cs'     // Czech
105
    | 'da'     // Danish
106
    | 'de'     // German
107
    | 'el'     // Greek
108
    | 'en'     // English (default)
109
    | 'en-GB'  // English (UK)
110
    | 'es'     // Spanish
111
    | 'et'     // Estonian
112
    | 'eu'     // Basque
113
    | 'fa'     // Persian/Farsi
114
    | 'fi'     // Finnish
115
    | 'fr'     // French
116
    | 'gl'     // Galician
117
    | 'he'     // Hebrew
118
    | 'hr'     // Croatian
119
    | 'hu'     // Hungarian
120
    | 'id'     // Indonesian
121
    | 'is'     // Icelandic
122
    | 'it'     // Italian
123
    | 'ja'     // Japanese
124
    | 'ko'     // Korean
125
    | 'kr'     // Korean (alternative)
126
    | 'lt'     // Lithuanian
127
    | 'lv'     // Latvian
128
    | 'mk'     // Macedonian
129
    | 'mn'     // Mongolian
130
    | 'nl'     // Dutch
131
    | 'no'     // Norwegian
132
    | 'pl'     // Polish
133
    | 'pt'     // Portuguese
134
    | 'pt-BR'  // Portuguese (Brazil)
135
    | 'ro'     // Romanian
136
    | 'ru'     // Russian
137
    | 'se'     // Swedish
138
    | 'sk'     // Slovak
139
    | 'sl'     // Slovenian
140
    | 'sq'     // Albanian
141
    | 'sr-YU'  // Serbian
142
    | 'sv'     // Swedish (alternative)
143
    | 'sw'     // Swahili
144
    | 'th'     // Thai
145
    | 'tr'     // Turkish
146
    | 'uk'     // Ukrainian
147
    | 'vi'     // Vietnamese
148
    | 'zh'     // Chinese
149
    | 'zh-TW'; // Chinese (Taiwan)
150
```
151

152
**Usage Examples:**
153

154
```javascript
155
// Spanish locale
156
$.datetimepicker.setLocale('es');
157
$('#spanish-date').datetimepicker({
158
    format: 'd/m/Y'
159
});
160

161
// Russian locale
162
$.datetimepicker.setLocale('ru');
163
$('#russian-date').datetimepicker({
164
    format: 'd.m.Y'
165
});
166

167
// Arabic locale (RTL support)
168
$.datetimepicker.setLocale('ar');
169
$('#arabic-date').datetimepicker({
170
    rtl: true,
171
    format: 'Y/m/d'
172
});
173
```
174

175
### Right-to-Left (RTL) Support
176

177
Support for right-to-left languages.
178

179
```javascript { .api }
180
interface RTLOptions {
181
    /** Enable right-to-left layout (default: false) */
182
    rtl?: boolean;
183
}
184
```
185

186
**Usage Examples:**
187

188
```javascript
189
// Arabic with RTL layout
190
$.datetimepicker.setLocale('ar');
191
$('#arabic-rtl').datetimepicker({
192
    rtl: true,
193
    format: 'Y/m/d H:i'
194
});
195

196
// Hebrew with RTL layout
197
$.datetimepicker.setLocale('he');
198
$('#hebrew-rtl').datetimepicker({
199
    rtl: true,
200
    format: 'd/m/Y'
201
});
202

203
// Persian with RTL layout
204
$.datetimepicker.setLocale('fa');
205
$('#persian-rtl').datetimepicker({
206
    rtl: true,
207
    timepicker: false
208
});
209
```
210

211
### Locale-Specific Examples by Region
212

213
Common configurations for different regions.
214

215
**Usage Examples:**
216

217
```javascript
218
// European date format (DD/MM/YYYY)
219
$.datetimepicker.setLocale('de');
220
$('#european-date').datetimepicker({
221
    format: 'd/m/Y H:i',
222
    dayOfWeekStart: 1 // Monday first
223
});
224

225
// US date format (MM/DD/YYYY)
226
$.datetimepicker.setLocale('en');
227
$('#us-date').datetimepicker({
228
    format: 'm/d/Y h:i A',
229
    hours12: true,
230
    dayOfWeekStart: 0 // Sunday first
231
});
232

233
// ISO format with local names
234
$.datetimepicker.setLocale('fr');
235
$('#iso-french').datetimepicker({
236
    format: 'Y-m-d H:i',
237
    dayOfWeekStart: 1
238
});
239

240
// Asian date formats
241
$.datetimepicker.setLocale('ja');
242
$('#japanese-date').datetimepicker({
243
    format: 'Y年m月d日',
244
    timepicker: false
245
});
246

247
$.datetimepicker.setLocale('ko');
248
$('#korean-date').datetimepicker({
249
    format: 'Y년 m월 d일',
250
    timepicker: false
251
});
252

253
$.datetimepicker.setLocale('zh');
254
$('#chinese-date').datetimepicker({
255
    format: 'Y年m月d日',
256
    timepicker: false
257
});
258
```
259

260
### Mixed Locale Usage
261

262
Using different locales in the same application.
263

264
**Usage Examples:**
265

266
```javascript
267
// Store original locale
268
var originalLocale = 'en';
269

270
// Temporarily switch locale for specific picker
271
$.datetimepicker.setLocale('de');
272
$('#german-picker').datetimepicker({
273
    format: 'd.m.Y'
274
});
275

276
// Restore original locale
277
$.datetimepicker.setLocale(originalLocale);
278

279
// Continue with original locale
280
$('#english-picker').datetimepicker({
281
    format: 'm/d/Y'
282
});
283

284
// Or use custom i18n without changing global locale
285
$('#custom-french').datetimepicker({
286
    i18n: {
287
        fr: {
288
            months: [
289
                'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
290
                'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
291
            ],
292
            dayOfWeekShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
293
            dayOfWeek: [
294
                'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 
295
                'Jeudi', 'Vendredi', 'Samedi'
296
            ]
297
        }
298
    }
299
});
300
```
301

302
### Dynamic Locale Switching
303

304
Change locale based on user preferences or context.
305

306
**Usage Examples:**
307

308
```javascript
309
// Locale switcher
310
function switchLocale(locale) {
311
    $.datetimepicker.setLocale(locale);
312
    
313
    // Reinitialize all pickers with new locale
314
    $('.datetimepicker').each(function() {
315
        var $this = $(this);
316
        var options = $this.data('datetimepicker-options') || {};
317
        
318
        $this.datetimepicker('destroy');
319
        $this.datetimepicker(options);
320
    });
321
}
322

323
// Dropdown to switch locale
324
$('#locale-selector').on('change', function() {
325
    var selectedLocale = $(this).val();
326
    switchLocale(selectedLocale);
327
});
328

329
// Detect browser locale
330
function detectAndSetLocale() {
331
    var browserLocale = navigator.language || navigator.userLanguage;
332
    var supportedLocale = browserLocale.split('-')[0]; // Get language part
333
    
334
    // Check if locale is supported
335
    var supportedLocales = ['ar', 'de', 'en', 'es', 'fr', 'it', 'ru', 'zh'];
336
    if (supportedLocales.includes(supportedLocale)) {
337
        $.datetimepicker.setLocale(supportedLocale);
338
    } else {
339
        $.datetimepicker.setLocale('en'); // Fallback to English
340
    }
341
}
342

343
// Auto-detect on page load
344
$(document).ready(function() {
345
    detectAndSetLocale();
346
});
347
```