本地化意味着浏览器根据应用程序内部的浏览器设置或手动设置以不同的语言显示数据。要实现jQuery UI Datepicker以根据浏览器设置以不同的语言显示, 请执行以下步骤：
方法：
添加以下JavaScript引用。
<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> 使用JavaScript获取浏览器语言版本。下面是代码
var userLang = navigator.language || navigator.userLanguage;添加以下JavaScript代码以在jQuery Datepicker中实现本地化。这里我们使用扩展属性根据浏览器设置(第2步)设置区域语言。
var options = $.extend(
{}, // empty object
$.datepicker.regional[userLang], // Dynamically
{ dateFormat: "mm/dd/yy" } // your custom options
);
$("#calendar").datepicker(options);<!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>让我们看下图, 显示语言更改时的显示方式：
输出1：在以下代码中使用" en-US"将区域语言更改为英语时：
var options = $.extend(
{}, // empty object
$.datepicker.regional[ "en-US" ], // Dynamically
{ dateFormat: "mm/dd/yy" } // your custom options
);
输出2：在以下代码中使用" hi"将区域语言更改为印地语时：
var options = $.extend(
{}, // empty object
$.datepicker.regional[ "hi" ], // Dynamically
{ dateFormat: "mm/dd/yy" } // your custom options
);
你可以根据需要从以下链接使用区域语言代码：ISO 639-1代码列表
