如何使用jQuery创建UI Datepicker

本地化是指浏览器根据浏览器的设置或应用程序内部的手动设置，以不同的语言显示数据。为了实现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的本地化。在这里，我们使用extend属性来设置区域语言，以满足浏览器的设置（步骤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    
);

如何使用jQuery创建UI Datepicker？

输出2：当使用以下代码中的 “hi “改变区域语言为印度语时。

var options = .extend(        
    {},  // empty object        
    .datepicker.regional["hi"], // Dynamically        
    { dateFormat: "mm/dd/yy"} // your custom options    
);