input type=date 的相容性等問題
阿新 • • 發佈：2019-02-09
HTML5 input date 移動端 IOS 不支援問題（不支援顯示是：預設的樣式是年/月/日然後是有上下小三角的箭頭。）
桌面端（Mac）
Safari 不支援 datepicker，placeholder 正常顯示。
Firefox 不支援 datepicker，placeholder 正常顯示。
Chrome 支援 datepicker，顯示 年、月、日 格式，忽略 placeholder。
移動端
iPhone5 iOS7 有 datepicker 功能，但是不顯示 placeholder。
Andorid 4.0.4 無 datepicker 功能，不顯示 placeholder
從上面可以看出，iOS 上會有 date 不會顯示 placeholder 文字，Android 部分機型沒有 date 也不會顯示 placeholder 文字。但是為了統一表單外觀，往往需要顯示。
解決方法：
先使其 type 為 text，此時支援 placeholder，當觸控或者聚焦的時候，使用 JS 切換使其觸發 datepicker 功能。
<inputplaceholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">
還有個解決方法：先刪除他的placeholder的屬性再新增上。
$(input[type='date']).bind({
focus:function(){$(this).removeAttr("placeholder")}
blur:function(){ if($(this).val()== ''){ $(this).attr("placeholder","日期的預設值")}
})