移动端如何显示日期选择器和placeholder

以前在开发pc网站时，当需要日期选择器时，都是使用第三方的，比如：my97datePicker，bootstrap-datepicker等。但到了移动时代，这些控件并不能很好的适配移动端。即使号称响应式的bootstrap-datepicker，虽然在移动端显示没有问题，但操作起来却异常繁琐。
其实，html5已经默认自带了日期选择控件，使用方法也很简单，只需要将input标签的type类型设置成date：

iOS和android小米手机上的效果：

iOS11上效果，弹出层的方式显示在底部

小米手机上效果，弹出层的方式显示在屏幕正中央

但是这里有个小问题，就是placeholder在移动端支持的不是很好，当input的value是空时，也不会显示placeholder的内容。
网上找了2个方法都有些问题：
方法一，先将type设置成text，当获取焦点时，再设置成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');    
  }
});

最后不得不暂时妥协，索性不显示提示文字，或者显示一个默认日期，比如当前日期。也是比较无奈，如果以后有好的方法，再来补上吧。