- 本文是由 Chrome 軟體工程師 Kent Tamura 所撰寫。
您可能已經注意到,Google Chrome 自 Chrome 20 起就支援日期挑選器。只要將 input
元素的 type
屬性設為 date
,使用者只要按一下箭頭按鈕,Chrome 便會彈出日曆小工具。
我們收到許多開發人員的意見回饋,因此想針對如何充分運用本文中的日期挑選器,在此說明一些注意事項。
語言代碼對輸入值的日期格式有何影響?
使用者可以在 input[type=date]
的文字欄位中輸入日期值,在方塊中以灰色文字顯示日期格式。這種格式取自作業系統的設定。
由於目前沒有指定格式的標準,因此網路作者能夠變更日期格式。
傳送至伺服器時,系統如何表示輸入值?
在 HTTP 要求 (如 GET / POST) 中從 input[type=date]
解讀的日期值將採用 yyyy-mm-dd
格式。
輸入值會傳回哪種格式?
無論顯示格式為何,input.value
一律會傳回 yyyy-mm-dd
。
輸入值可以接受哪種格式?
以程式輔助方式設定 input.value
時,無論初始值和 JavaScript 插入值的呈現格式為何,值都只接受 yyyy-mm-dd
樣式。
如何變更日期挑選器的外觀?
您目前無法設定日期挑選器的外觀樣式。在 WebKit 中,我們先前提供多種使用 -webkit-appearance
CSS 屬性或 ::-webkit-foo
虛擬類別選取器設定表單控制項樣式的方法。不過,日曆彈出式視窗在 WebKit 中並未提供這類方式,因為它與文件分開 (例如 <select>
的彈出式選單),而且目前沒有如何控制子元素樣式的標準。
如何避免 jQuery Datepicker 與原生日期挑選器之間發生衝突?
如果您已使用 Google Chrome 的 input[type=date]
嘗試 jQuery Datepicker,可能會發現 jQuery UI 和原生日曆彈出式視窗兩者重疊。如果要在所有平台套用 jQuery Datepicker,請使用 input[type=text]
而非 input[type=date]
。不僅 Google Chrome 和 iOS Safari、BlackBerry 瀏覽器和 Opera 都有專屬的 input[type=date]
UI,而且目前還無法在所有使用 input[type=date]
的平台上,呈現一致的使用者介面。
如果只想在不支援 input[type=date]
的平台上套用 jQuery Datepicker,您可以使用 Modernizr 或下列程式碼:
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();