以前在开发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');
}
});
最后不得不暂时妥协，索性不显示提示文字，或者显示一个默认日期，比如当前日期。也是比较无奈，如果以后有好的方法，再来补上吧。
