Comment désactiver le champ de date dans Eonasdan bootstrap datetimepicker?

Question

Je voudrais utiliser Eonasdan bootstrap datetimepicker Version 4 pour mon projet.

L'exigence est de trouver une plage de temps. Ma question est: - est-il possible d'avoir une plage entre 2 fois sans la date (en d'autres termes, désactiver la date et avoir seulement la plage de temps).

Votre aide est très appréciée. Merci.

Answer 1

Vous pouvez utiliser le composant en tant que timepicker à l'aide de format: HH:mm. Vous pouvez limiter l'heure sélectionnable en utilisant disabledTimeIntervals.

Voici un exemple de travail désactiver le temps de 0 à 8 et de 15 à 18:

$('#datetimepicker').datetimepicker({ 
 
    disabledTimeIntervals: [ 
 
    [moment({ h: 0 }), moment({ h: 8 })], 
 
    [moment({ h: 15 }), moment({ h: 18 })] 
 
    ], 
 
    defaultDate: moment("12:00", 'HH:mm'), 
 
    format: 'HH:mm' 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <h6>datetimepicker</h6> 
 
    <input type="text" class="form-control" id="datetimepicker"/> 
 
    </div> 
 
</div>