2010-06-03 89 views
35

我知道,在寫這篇文章的時候只有Opera支持有沒有辦法本地化輸入類型=「日期」,在HTML5

<input type="date" name="mydate"> 

,也許我嘗試本地化此領域的瀏覽器的用戶界面已經遇到了挫折感,因爲像本地化這樣的細微差別尚未包含在它們的實現中,但我甚至沒有在HTML5規範中看到它的提及。應該指定本地化嗎?我應該在父元素上執行lang =「fr」嗎?

上有問題的網站實施的一些注意事項:

  • 本地化(語言),明確由用戶挑選,因爲他們是在管理多種語言的數據,這是不合理的期望,用戶的瀏覽器Chrome瀏覽器正在查看的語言中,或者瀏覽器正在提供所需的語言請求標題。
  • 我想確定,如果頁面以法語呈現,那麼瀏覽器chrome提供的日期選擇器將顯示對法語有意義的選項。
  • 的計劃是回落到jQueryUI的爲不支持類型=「日期」瀏覽器,我將使用Dive into HTML 5

回答

13

提供的檢測機制,據我所知,後面我們在做羣衆的思想Opera(完全公開:我爲他們工作)是日期選擇器幾乎是Chrome瀏覽器本地控件的擴展。因此,它將根據瀏覽器的語言進行本地化,而不是正在查看的頁面的語言。

+4

3問題:1.這是不和諧的用戶具有切換語言(鉻含量VS)爲日期選擇器。 2.數據將以語言環境呈現給頁面,鉻(英文模式)會理解法語,Juin意味着六月嗎? 3.服務器端會希望以某種語言環境格式化數據並進行相應的解析,如果日期選擇器格式化預期語言環境的日期,則服務器會誤解它。 這些問題不限於日期。數字呢?法語使用逗號而不是小數。鉻將如何處理? 該方法似乎目光短淺。 – lambacck 2010-06-04 17:19:47

+5

1它的行爲就像所有瀏覽器中的文件類型輸入一樣......也根據瀏覽器語言環境而不是頁面進行本地化。我可以看到贊成和反對這個論點。 2並不完全明白你的意思 - 假設這與3相關,無論如何顯示日期選擇器的UI,最終結果(然後傳遞給服務器)始終採用相同的ISO格式,無論用戶界面顯示的語言。沒有嘗試數字的事情(假設你的意思是輸入類型=「數字」)...但在這裏我可以看到,它確實會有潛在的問題。不知道這是目前本地化,壽。 – 2010-06-06 00:56:19

+0

我不認爲ISO格式是漸進增強的合理迴應。如果瀏覽器回退到一個普通的輸入框,並且他們沒有啓用Javascript(是那些人存在),他們將不得不以ISO格式輸入日期?如果用戶不是技術人員,他們不太可能希望以ISO格式輸入日期(甚至不知道如何)。 – lambacck 2010-10-05 16:33:39

11

我同意lambacck。目前,我正在編寫Javascript代碼,以便可以跨瀏覽器使用新的表單功能,使用jQuery UI。

我在盧森堡工作,這是一個很好的地方來更詳細地說明本地化問題。

我們寫的大多數網站都是多語言的| fr | en。根據我們的統計數據,我們可以看出,人們使用網站上的語言切換來顯示他們的首選語言,但該選擇很少與首選瀏覽器語言環境相匹配。

如果日曆等領域的區域是由OS完成的,這讓我們回到那個不幸的<輸入 類型=文件>情況標籤讀取上傳文件和按鈕說:瀏覽器。你對這種語言組合無能爲力,我總覺得這是一個主要的煩惱。

結論,我必須用jQuery覆蓋默認的日曆,以確保它能做到我想要的。

在我看來,一個可配置的API或至少一種在HTML級別上操作語言環境的方法會很棒。由於新的字段類型尚未被其他瀏覽器製造商廣泛採用,我想這個問題仍然可以考慮。

感謝您閱讀本文。

+0

「標籤讀取上傳文件和按鈕說Parcourir」:這只是意味着,您的應用程序不尊重用戶瀏覽器語言... – feeela 2011-03-10 16:33:20

+6

@feeela:如果您的網站有一個語言選擇器讓用戶覆蓋默認(瀏覽器提供的)語言... – fretje 2011-05-14 20:23:41

3

對於手機,我們發現的最佳解決方案是使用文本輸入進行日期輸入,並在其旁邊有一個日曆圖標,該圖標在圖標上有一個不可見的日期輸入。

優點:

  • 適用於所有瀏覽器和設備
  • 可以使用Next按鈕進入日期在iOS(如果有多個字段)
  • 用戶可以鍵入日期(非常有用)
  • 避免iOS用戶界面的bug(1.用空白日期編輯現有數據,下一個日期,日期值設置爲今天 - arrrgh,2.鍵盤顯示,下一個日期,彈出顯示和鍵盤消失 - ouch)
  • 使用日期庫在輸入中顯示日期作爲用戶賬戶(而非瀏覽器)的本地化設置,並且可以使用智能日期庫(輸入「明天」等)。
  • 點擊日曆圖標,看看日期,瀏覽器本地化
  • 優美后備即使input type=date不是由設備/瀏覽器支持(例如,一些Android設備不支持日期或有嚴重的錯誤)。
  • 桌面(通過無觸摸支持檢測)我們顯示我們自己的自定義日期下拉列表。

HTML是這樣的:

<input type=text> 
<span style=position:relative> 
    <input type=date class=date-input tabIndex=-1> 
    <div class=date-input-icon>&#x25BC;</div> 
</span> 

CSS:

.date-input { 
    position: relative; 
    z-index: 1; 
    webkit-appearance: none; 
    display: inline-block; 
    opacity: 0; 
    width: 1em; 
} 

.date-input-icon { 
    position: absolute; 
    right: 0; 
    width: 1em; 
} 
+1

問題是關於本地化而不是與使用本機類型=日期小部件相關的其他問題。答案中沒有提到本地化。 – lambacck 2015-03-26 02:06:41

+0

沒關係,我看到使用javascript的本地化部分(這是接受的解決方案已經是)。 – lambacck 2015-03-26 02:07:50

+0

當按鈕提供選擇UI時,使用隱藏日期輸入而不是僅使用type = text的優點是什麼。 – lambacck 2015-03-27 14:09:21

相關問題