以前在開發pc網站時，當需要日期選擇器時，都是使用第三方的，比如：my97datePicker，bootstrap-datepicker等。但到了移動時代，這些控件并不能很好的適配移動端。即使號稱響應式的bootstrap-datepicker，雖然在移動端顯示沒有問題，但操作起來卻異常繁瑣。
其實，html5已經默認自帶了日期選擇控件，使用方法也很簡單，只需要將input標簽的type類型設置成date：
<input id="date-input" type="date" placeholder="請選擇日期" >
iOS和android小米手機上的效果：
但是這里有個小問題，就是placeholder在移動端支持的不是很好，當input的value是空時，也不會顯示placeholder的內容。
網上找了2個方法都有些問題：
方法一，先將type設置成text，當獲取焦點時，再設置成date
<input id="date-input" type="text" placeholder="請選擇日期" onfocus="(this.type='date')">
這種方式有很大的問題，當用戶第一次點擊控件時，你會發現彈出框顯示的并非是日期選擇而是文本輸入，因為type是text。而且，如果是多語言版本，日期的格式其實是不固定的，不一定就是：'yyyy-MM-dd'，此時如果input控件有默認值（比如從后端獲取），這個值的顯示就成了問題（不可能讓默認值單純的就顯示成'yyyy-MM-dd'格式，不然當用戶點擊控件選擇日期后，你會發現格式可能變成了：'MM-dd-yyyy'）。
方法二：使用js代碼控制placeholder的顯示與否：
$(input[type='date']).bind({
focus:function(){$(this).removeAttr("placeholder")},
blur:function(){ if($(this).val()== ''){ $(this).attr("placeholder","請選擇日期")}}
});
經過測試，這種方法在移動端依然無法顯示placeholder的值。。
我最后想了一個方法，思路是首先讓輸入框失去焦點，這樣軟鍵盤就不會彈出來，然后將type值修改成date，最后再讓其獲得焦點，檢出軟鍵盤。但是最終的效果依然不盡人意，在有的急性上會點擊兩次才彈出軟鍵盤，這并不是我想要的效果。
$('#date-ele').attr('type', 'text');
$('#date-ele').attr('placeholder', '請選擇日期');
$('#date-ele').on('focus', function () {
if ($('#date-ele').attr('type') == 'text') {
// 失去焦點
document.activedate-ele.blur();
// 修改type=date
$('#date-ele').attr('type', 'date');
// 重新獲取焦點
document.activedate-ele.focus();
$('#date-ele').trigger('click');
}
});
最后不得不暫時妥協，索性不顯示提示文字，或者顯示一個默認日期，比如當前日期。也是比較無奈，如果以后有好的方法，再來補上吧。
