2015-05-18 60 views
9

我有引導datetimepicker一個嚴重的問題的工作,這裏是jsfiddle引導的DateTimePicker不只讀或禁用

<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沒有鍵盤顯示。因此,我使用readonlydisabled,但問題是,當我使用其中的一個引導datetimepicker不起作用。 http://jsfiddle.net/faissal_aboullait/kx0e5wmq/1/

+0

可能重複[防止iPhone默認鍵盤時聚焦](http://stackoverflow.com/questions/7610758/prevent-iphone-default-keyboard-when-focusing-an-input) – DavidDomain

+0

沒有,因爲我需要爲所有移動設備提供解決方案。 android和iphone或其他 – Codinga

+0

您所討論的帖子是通過只讀方式解決的。我的帖子是,這隻讀是一個問題請看這個請:http://jsfiddle.net/faissal_aboullait/kx0e5wmq/1/ – Codinga

回答

34

如果您仍在尋找解決方案,請查看代碼段。這正是我在評論中提出的建議,你只需要打電話給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>

使用圖標來挑選你的日期,而不是文本字段。文本字段是隻讀的。

+0

不要工作,我在這裏測試它:http://jsfiddle.net/faissal_aboullait/kx0e5wmq/2/ – Codinga

+0

你看過這段代碼嗎?如果您在小提琴中打開控制檯,它會顯示「ignoreReadonly無法識別!」。這是因爲您正在使用不同版本的datetimepicker。只需使用我的代碼片段中的依賴關係,它就可以正常工作。 – DavidDomain

+0

我無法更改依賴項,因爲我使用此插件的主題。還有其他解決方案,而不改變依賴關係? – Codinga