以前在開發(fā)pc網(wǎng)站時汪榔，當(dāng)需要日期選擇器時啊胶，都是使用第三方的赦拘，比如：my97datePicker慌随，bootstrap-datepicker等。但到了移動時代另绩，這些控件并不能很好的適配移動端儒陨。即使號稱響應(yīng)式的bootstrap-datepicker，雖然在移動端顯示沒有問題笋籽，但操作起來卻異常繁瑣蹦漠。
其實，html5已經(jīng)默認(rèn)自帶了日期選擇控件车海，使用方法也很簡單笛园，只需要將input標(biāo)簽的type類型設(shè)置成date：
<input id="date-input" type="date" placeholder="請選擇日期" >
iOS和android小米手機上的效果：
但是這里有個小問題研铆，就是placeholder在移動端支持的不是很好，當(dāng)input的value是空時州叠，也不會顯示placeholder的內(nèi)容棵红。
網(wǎng)上找了2個方法都有些問題：
方法一，先將type設(shè)置成text咧栗，當(dāng)獲取焦點時逆甜，再設(shè)置成date
<input id="date-input" type="text" placeholder="請選擇日期" onfocus="(this.type='date')">
這種方式有很大的問題，當(dāng)用戶第一次點擊控件時致板，你會發(fā)現(xiàn)彈出框顯示的并非是日期選擇而是文本輸入交煞，因為type是text。而且斟或，如果是多語言版本素征，日期的格式其實是不固定的，不一定就是：'yyyy-MM-dd'萝挤，此時如果input控件有默認(rèn)值（比如從后端獲扔恪），這個值的顯示就成了問題（不可能讓默認(rèn)值單純的就顯示成'yyyy-MM-dd'格式平斩，不然當(dāng)用戶點擊控件選擇日期后亚享，你會發(fā)現(xiàn)格式可能變成了：'MM-dd-yyyy'）。
方法二：使用js代碼控制placeholder的顯示與否：
$(input[type='date']).bind({
focus:function(){$(this).removeAttr("placeholder")},
blur:function(){ if($(this).val()== ''){ $(this).attr("placeholder","請選擇日期")}}
});
經(jīng)過測試绘面，這種方法在移動端依然無法顯示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');
}
});
最后不得不暫時妥協(xié)院崇，索性不顯示提示文字肆氓，或者顯示一個默認(rèn)日期，比如當(dāng)前日期底瓣。也是比較無奈谢揪，如果以后有好的方法，再來補上吧捐凭。
