探討 JavaScript 的日期全球化功能 關於文化特性值使用瀏覽器語言設定來全球化 JavaScript 的日期值使用 Web.config 的設定來全球化 JavaScript 的日期值使用網頁設定來全球化 JavaScript 的日期值使用伺服器端程式碼來全球化 JavaScript 的日期值 JavaScript 日期值全球化的優先順序
日期 " 是一個實務應用程式必定會使用到的資料項目, 而隨著全球化與資訊無國界的形成, 如何讓 JavaScript 以全球化格式來顯示日期值便成為一項重要的課題 微軟公司也深知此一道理, 因此在 ASP.NET 3.5 AJAX 中, 替別提供了用戶端 JavaScript 的日期全球化功能 在套用了相關的全球化設定之後, 用戶端 JavaScript 就可以根據某個文化特性值來格式化 Date 或 Number 物件, 重點是, 它完全不需要將網頁回傳至 Web 伺服器 用戶端 JavaScript 所使用的文化特性值可以來自不同的設定, 包括 : 使用者的瀏覽器語言設定 Web.config 的設定 網頁本身的設定 亦或是以伺服器端程式碼來設定 本章的重點, 就是要說明如何使用這四種方式來完成 JavaScript 的日期全球化 5-1 關於文化特性值 文化特性值提供了特定文化 ( 地區設定 ) 的相關資訊 大家必須瞭解, 文化特性值是由代表語言的兩個字母以及代表國家或地區的另外兩個字母所組合而成 舉例來說,es-MX 代表墨西哥西班牙文,es-CO 代表哥倫比亞西班牙文,fr-CA 代表加拿大法文,en-US 代表美國英文,zh-TW 代表台灣中文, zh-cn 則代表中國中文 ASP.NET 3.5 AJAX 是藉由賦予 JavaScript 的 Date 物件一個 localeformat 方法來使其具備日期全球化功能 localeformat 方法使得 Date 物件可以根據下列四種方式來全球化日期 : 使用瀏覽器語言設定來全球化 JavaScript 的日期值 使用 Web.config 的設定來全球化 JavaScript 的日期值 使用網頁設定來全球化 JavaScript 的日期值 使用伺服器端程式碼來全球化 JavaScript 的日期值 正如大家所知道的, 要設定伺服器端的文化特性值, 也是使用上述四種方式 基本上,ASP.NET 3.5 AJAX 提供了一種用戶端與伺服器端一致的設定方式來全球化日期值 基本上, 伺服器會解譯您的文化特性值設定方式, 產生一個用於格式化日期的用戶端物件, 並透過 Sys.CultureInfo. CurrentCulture 屬性來加以揭露 5-2
我們在前一章就曾經說過, 您的網頁必須加入一個 ScriptManager 控制項, 才能享有 ASP.NET 3.5 AJAX 對 JavaScript 所提供的各項擴充功能 由此可知, 欲享有 JavaScript 的日期全球化功能, 您同樣必須在網頁中加入一個 ScriptManager 控制項, 而且請記得, 務必將 ScriptManager 控制項的 EnableScriptGlobalization 屬性設定成 True 5-2 使用瀏覽器語言設定來全球化 JavaScript 的日期值 欲使用瀏覽器語言設定來全球化 JavaScript 的日期值, 您的瀏覽器必須依下列步驟進行設定 :( 以下我們以 Internet Explorer 做為說明對象 ) 1. 開啟 Internet Explorer 2. 從 工具 功能表中選取 網際網路 選項 3. 按一下 一般 索引標籤頁面中的 語言 按鈕 4. 於圖表 5-1 所示的 語言喜好設定 對話方塊中, 加入您所要採用的語言, 並且將其移至清單中的最上方, 然後按一下 確定 按鈕 圖表 5-1 5. 除了瀏覽器的語言設定之外, 請於您網站的組態檔 Web.config 中, 於 system.web 區段之內, 加入設定如下的 globalization 項目 : <globalization culture="auto" /> 5-3
"auto" 設定表示以瀏覽器請求中的 ACCEPT-LANGUAGE 標頭 ( 它提供使用者語言偏好清單 ) 來設定文化特性值 這是一個 Button 伺服器控制項, 位於 UpdatePanel 控制項之內 這是一個 HTML input 按鈕, 位於 UpdatePanel 控制項之外 圖表 5-2 網頁範例 使用瀏覽器語言設定來全球化 JavaScript 的日期值 圖表 5-2 是網頁範例 CH5_DemoForm001.aspx 的執行畫面, 不論您是按下 UpdatePanel 控制項之內的 Button 伺服器控制項按鈕, 或是按下 UpdatePanel 控制項之外的 HTML input 按鈕, 都會執行 JavaScript 函式來顯示目前的日期時間, 重點是, 所顯示的日期時間將會採用瀏覽器的語言設定來加以全球化 您可以在圖表 5-1 所示的對話方塊中變更語言清單中的語言順序, 然後重新執行本網頁並檢視其執行結果, 此舉將可證明所顯示的日期時間格式是根據瀏覽器的語言設定來加以全球化 本網頁範例的設計技巧說明如下 : 首先, 請檢視本網頁的宣告式標記內容 : <form id="form1" runat="server"> <asp:scriptmanager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true" /> <asp:updatepanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional"> <ContentTemplate> <asp:panel ID="Panel1" runat="server" GroupingText="Update Panel"> 5-4
<asp:button ID="btnDisplayDate" runat="server" Text=" 顯示日期 " /> <br /> <asp:label ID="Label1" runat="server"></asp:label> </asp:panel> </ContentTemplate> </asp:updatepanel> <input id="button1" type="button" value=" 顯示日期 " onclick="return DisplayDate();"/> <div id="message"></div> </form> 在檢視以上的宣告式標記內容時, 有三點必須特別注意到 第一, 務必將 ScriptManager 控制項的 EnableScriptGlobalization 屬性設定成 True 第二,Button 伺服器控制項位於 UpdatePanel 控制項之內, 它被按下後會將日期時間顯示在同位於 UpdatePanel 控制項之內的 Label 控制項 第三,HTML input 按鈕位於 UpdatePanel 控制項之外, 它被按下後會執行 JavaScript 函式 DisplayDate() 並將日期時間顯示在同位於 UpdatePanel 控制項之外的 <div> 項目上 請替網頁撰寫以下的 JavaScript, 重點在於, 為了能夠讓日期時間值全球化, 請務必建立一個 Date 物件並使用其 localeformat 方法來顯示日期時間 : <script type="text/javascript"> // 設定當按下 Button 伺服器控制項就執行 JavaScript 函式 formatedate() Sys.UI.DomEvent.addHandler($get("btnDisplayDate"), "click", formatdate); function formatdate() { // 建立一個 Date 物件 var d = new Date(); try { // 使用 Date 物件的 localeformat 方法來顯示日期時間 $get('label1').innerhtml = d.localeformat("dddd, dd MMMM yyyy HH:mm:ss"); 5-5
catch(e) { alert(" 錯誤 :" + e.message); function DisplayDate() { // 建立一個 Date 物件 var d = new Date(); try { // 使用 Date 物件的 localeformat 方法來顯示日期時間 $get('message').innerhtml = d.localeformat("dddd, dd MMMM yyyy HH:mm:ss"); return false; catch(e) { alert(" 錯誤 :" + e.message); </script> 5-3 使用 Web.config 的設定來全球化 JavaScript 的日期值 您可以使用組態檔 Web.config 的設定來全球化 JavaScript 的日期值, 該設定將會套用至網站中的所有網頁, 而且此一設定的優先順序將高於瀏覽器的語言設定 舉例來說, 假設您希望日期時間值要採用代表墨西哥西班牙文的文化特性, 請於您網站的組態檔 Web.config 中, 於 system.web 區段之內, 加入設定如下的 globalization 項目 : <globalization culture="es-mx" /> CH5 專案之 Web.config 中的原先的全球化設定是 <globalization culture="auto" />, 現在請您將其更改成 <globalization culture="es-mx" 5-6
/>, 然後再次執行網頁範例 CH5_DemoForm001.aspx, 您會發現,JavaScript 利用 Date 物件之 localeformat 方法所顯示的日期時間已採用墨西哥西班牙文的文化特性 ( 如圖表 5-3 所示 ) JavaScript 所顯示的日期時間採用墨西哥西班牙文的文化特性 圖表 5-3 5-4 使用網頁設定來全球化 JavaScript 的日期值 個別網頁可以自行在 @Page 指示詞當中使用 Culture 屬性來決定要使用哪一個文化特性值來全球化 JavaScript 的日期時間值 請注意,@Page 指示詞設定的優先順序將高於 Web.config 組態檔設定以及瀏覽器語言設定 JavaScript 所顯示的日期時間採用德國德文的文化特性 圖表 5-4 5-7
網頁範例 示範使用 @Page 指示詞來設定網頁的文化特性值 圖表 5-4 是網頁範例 CH5_DemoForm002.aspx 的執行畫面,JavaScript 所顯示的日期時間之所以會採用德國德文的文化特性, 是因為我們如下所示, 在 @Page 指示詞當中加入 Culture="de-DE" 的屬性設定 : <%@ Page Language="VB" AutoEventWireup="true" CodeFile="CH5_DemoForm002.aspx.vb" Inherits="CH5_DemoForm002" Culture="de-DE" %> 5-5 使用伺服器端程式碼來全球化 JavaScript 的日期值 您可以使用伺服器端程式碼去覆寫基底 Page 類別的 InitializeCulture 方法來設定網頁的文化特性值, 此作法的優先順序高於先前所述的三種方式 選取網頁的文化特性 圖表 5-5 5-8
選取網頁的文化特性 圖表 5-6 網頁範例 示範覆寫基底 Page 類別的 InitializeCulture 方法來設定網頁的文化特性值 圖表 5-5 與 5-6 是網頁範例 CH5_DemoForm003.aspx 的執行畫面, 在您選取某一個文化特性之後, 按下特定的按鈕便會以該文化特性來全球化 JavaScript 的日期時間值 本範例主要在示範如何使用伺服器端程式碼去覆寫基底 Page 類別的 InitializeCulture 方法來設定網頁的文化特性值 相關程式碼如下所列 : ' 覆寫基底 Page 類別的 InitializeCulture 方法 ' 以便設定網頁的文化特性值 Protected Overloads Overrides Sub InitializeCulture() If Request.Form("DropDownList1") <> Nothing Then Dim selectedlanguage As String = Request.Form("DropDownList1") UICulture = Request.Form("DropDownList1") Culture = Request.Form("DropDownList1") Thread.CurrentThread.CurrentCulture = _ CultureInfo.CreateSpecificCulture(selectedLanguage) Thread.CurrentThread.CurrentUICulture = New CultureInfo(selectedLanguage) End If MyBase.InitializeCulture() End Sub 5-9
' 此段程式碼負責將文化特性的名稱填入 DropDownList 控制項中 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _ Handles Me.Load If Not IsPostBack Then Dim mysortedlist As New SortedDictionary(Of String, String)() For Each ci As CultureInfo In _ CultureInfo.GetCultures(CultureTypes.SpecificCultures) mysortedlist.add(ci.englishname, ci.name) Next Me.DropDownList1.DataSource = mysortedlist Me.DropDownList1.DataTextField = "Key" Me.DropDownList1.DataValueField = "Value" Me.DropDownList1.DataBind() End If End Sub 5-6 JavaScript 日期值全球化的優先順序 之前我們提了四種方式來全球化 JavaScript 的日期值, 這四種方式的優先順序如下所示 : 1. 使用伺服器端程式碼來全球化 JavaScript 的日期值擁有最高的優先順序 2. 其次是, 使用網頁設定來全球化 JavaScript 的日期值 3. 第三是, 使用 Web.config 的設定來全球化 JavaScript 的日期值 4. 最後則是使用瀏覽器語言設定來全球化 JavaScript 的日期值 5-10