La localización significa que el navegador muestra datos en diferentes idiomas según la configuración del navegador o la configuración manual dentro de la aplicación. Para implementar jQuery UI Datepicker para mostrar en diferentes idiomas según la configuración del navegador, siga los pasos:
Acercarse:
- Agregue las siguientes referencias de JavaScript.
<script src=</script><script src=</script>rel="stylesheet"type="text/css"/><script src=</script> - Obtener la versión del idioma del navegador mediante JavaScript. Aquí está el código:
var userLang = navigator.language || navigator.userLanguage;
- Agregue el siguiente código JavaScript para implementar la localización en jQuery Datepicker. Aquí estamos usando la propiedad extendida para establecer el idioma regional según la configuración del navegador (Paso 2).
varoptions = $.extend({},// empty object$.datepicker.regional[userLang],// Dynamically{ dateFormat:"mm/dd/yy"}// your custom options);$("#calendar").datepicker(options);
Ejemplo:
<!doctype html>
<html lang="en">
<head>
<title>Localization JQuery UI Datepicker </title>
<meta charset="utf-8">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src=
"http://code.jquery.com/ui/1.11.4/jquery-ui.js">
</script>
<link href=
"http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
var userLang = navigator.language || navigator.userLanguage;
var options = $.extend({}, // empty object
$.datepicker.regional[userLang], {
dateFormat: "mm/dd/yy"
} // your custom options
);
$("#calendar").datepicker(options);
});
</script>
</head>
<body>
<div class="container">
<h3>JQuery UI Datepicker Localization</h3>
<div id="calendar"> </div>
</div>
</body>
</html>
Veamos en las siguientes figuras cómo se muestra cuando cambia el idioma:
Salida 1: Al cambiar el idioma regional a inglés usando «en-US» en el siguiente código:
var options = $.extend(
{}, // empty object
$.datepicker.regional["en-US"], // Dynamically
{ dateFormat: "mm/dd/yy"} // your custom options
);
Salida 2: Al cambiar el idioma regional como hindi usando «hola» en el siguiente código:
var options = $.extend(
{}, // empty object
$.datepicker.regional["hi"], // Dynamically
{ dateFormat: "mm/dd/yy"} // your custom options
);
Puede utilizar el código de idioma regional según sus necesidades en el siguiente enlace: Lista de códigos ISO 639-1
Publicación traducida automáticamente
Artículo escrito por ankita1721cs1217 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA