Bootstrap日期时间选择器在readonly或disabled情况下无法正常工作。

Question

我在使用 Bootstrap 的 datetimepicker 时遇到了严重的问题，以下是一个 jsfiddle 示例：

<br/>
<!-- padding for jsfiddle -->
<div class="row">
    <div class="col-md-12">
         <h6>datetimepicker1</h6>

        <div class="form-group">
            <div class="input-group date" id="datetimepicker1">
                <input type="text" class="form-control" >   <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
            </div>
        </div>
    </div>
</div>

问题在于当我在移动设备上打开我的网站时，当我聚焦到输入字段时，移动设备的键盘会弹出，所以我希望只有datepicker显示而不显示键盘。因此，我使用readonly或disabled，但问题是当我使用它们之一时，bootstrap的datetimepicker就无法工作。

http://jsfiddle.net/faissal_aboullait/kx0e5wmq/1/

- Codinga

---

可能是重复的问题：当聚焦于<input>时，如何防止iPhone默认键盘弹出？ - DavidDomain

不行，因为我需要适用于所有移动设备的解决方案。包括安卓、苹果或其他设备。 - Codinga

你所谈论的帖子可以通过添加readonly来解决。我的帖子是指这个readonly是问题所在。请看这个链接：http://jsfiddle.net/faissal_aboullait/kx0e5wmq/1/ - Codinga

Answer 1

如果你仍在寻找解决方案，请查看这段代码。这正是我在评论中建议的，你只需调用datetimepicker。

ignoreReadonly: true

就是这样。

$(function () {
  $('#datetimepicker').datetimepicker({
    ignoreReadonly: true
  });
});

.container {
  margin-top: 80px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class='col-sm-6 col-sm-offset-3'>
        <div class="form-group">
          <div class='input-group date' id='datetimepicker'>
            <input type='text' class="form-control" readonly />
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

请使用图标选择日期，而不是文本框。文本框为只读。

- DavidDomain

Answer 2

在put语句中的readonly="yes"子句是可行的，实际上需要包含以下库。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">  
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js">    
</script>

- M Nasir

Answer 3

这对我有效：

.bootstrap-datetimepicker-widget.dropdown-menu  {
    width: 100%;
    max-width: calc(100%) !important;
}

- Webmaster G

Answer 4

以下条款是可行的，如果不起作用，那就意味着需要包含以下库：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">  
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js">    
</script>

- M Nasir

---

只读属性"readonly="yes""在输入语句中可与以下库一起使用。 - M Nasir

你添加了相同的答案两次。请删除其中一项？此外，您能否解释一下为什么您的答案比已被接受的答案更好呢？ - Jad