web-dev-qa-db-fra.com

Bootstrap datetimepicker ne fonctionne pas en lecture seule ou désactivé

J'ai un sérieux problème avec bootstrap datetimepicker, voici le 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>

Le problème est que lorsque j'ouvre mon site Web sur un mobile, le clavier mobile se déclenche lorsque je concentre le champ de saisie, ce dont j'ai besoin, c'est que seul le datepicker s'affiche sans clavier. Donc, pour cela, j'utilise readonly ou disabled, mais le problème est que lorsque j'utilise l'un d'eux, le bootstrap datetimepicker ne fait pas travail. http://jsfiddle.net/faissal_aboullait/kx0e5wmq/1/

javascriptjqueryhtmltwitter-bootstrap-3datetimepicker
16
Codinga

Si vous êtes toujours à la recherche d'une solution, jetez un œil à l'extrait de code. C'est exactement ce que j'ai suggéré dans le commentaire, il suffit d'appeler datetimepicker avec

ignoreReadonly: true

C'est ça.

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

Utilisez l'icône pour choisir votre date et non le champ de texte. Le champ de texte est en lecture seule.

50
DavidDomain