Question

我正在使用以下datepicker：（http://eternicode.github.io/bootstrap-datepicker/）作为我的date-Field。

<input class="datepicker" style="width:100px;border-radius: 4px;" type="text" placeholder="Datum" id="startDate"....

我正在使用两种不同的格式'dd.mm.yyyy'和'mm / dd / yyyy'，并且一切都很好。但是在移动设备上，当我点击输入字段时键盘会打开。

因此我使用了<input type='date'....的原生日期选择器，但是这个不支持不同的格式。

无论如何要禁用input type=text元素上的键盘？

或者你知道其他任何格式不同的日期选择器吗？

感谢您的帮助

Answer 1

选中此exmaple以获取readonly但不是灰色输入，这是默认的bootstrap。

我对项目有相同的修复。

＆＃13;

$(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());;
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

尝试以下操作：如果添加onfocus =“ blur（）;”元素，这将不允许软键盘打开。因此，您将无法在移动设备上打开键盘。

    let myView = UIView()
    self.view.addSubview(myView)
    myView.translatesAutoresizingMaskIntoConstraints = false
    myView.heightAnchor.constraint(equalTo: self.view.heightAnchor)
    myView.leadingAnchor.constraint(equalTo: vc.view.leadingAnchor, constant: 20.0) // 20 pixels to right of vc.view leading

$('#sandbox-container input').datepicker({});

改变格式的移动设备上的Bootstrap的Datepicker

2 个答案: