twitter-bootstrap – 更改格式的移动设备上的Bootstrap的Datepicker

我正在使用以下datepicker：( http://eternicode.github.io/bootstrap-datepicker/)作为我的日期 – 字段.

< input class =“datepicker”style =“width：100px; border-radius：4px;” type =“text”placeholder =“Datum”id =“startDate”.... 我正在使用两种不同的格式’dd.mm.yyyy’和’mm / dd / yyyy’并且外观很好.
但是在移动设备上,当我点击输入字段时键盘会打开.

因此我使用原生日期选择器< input type ='date'....但是这个不支持不同的格式. 无论如何在输入type = text元素上禁用键盘？ 或者你知道其他任何格式不同的日期选择器吗？ 谢谢你的帮助

解决方法

检查此 exmaple是否具有readonly但不是灰色输入,这是默认的bootstrap.

我对一个项目有同样的修复.

$(function() {
  var ismobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
  if (ismobile) {
    $("#datepicker input").addClass('no-grey').prop('readonly',true);
  }
  $("#datepicker").datepicker({
    autoclose: true,todayHighlight: true
  }).datepicker('update',new Date());;
});

.no-grey {
  background: #fff !important;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<label>Select Date:</label>
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
  <input class="form-control" type="text" />
  <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>