2017-12-31 130 views
0

Es ist möglich, einen input mit Typ time zu verwalten, um nur Stunden, nicht Minuten anzuzeigen.kann ich "Eingabe" mit dem Typ "Uhrzeit" verwenden, um Stunden statt Minuten anzuzeigen?

<div class="form-group"> 
    <label for="heure_seance" class="col-md-4 control-label">Heure : </label> 
    <div class="col-md-6"> 
      <input id="heure_seance" type="time" step='60' class="form-control" name="heure_seance" required> 
    </div> 
</div> 

Ich brauche Javascript oder es ist möglich mit einem HTML-Attribut?

Ich muss dies tun, weil in meiner Datenbank gespeicherte Zeit ganze Stunden sind, speichern wir keine Minuten.

Danke für Ihre Hilfe!

+0

Sind Sie nicht in der Lage Bibliotheken von Drittanbietern zu nutzen? – Ele

+0

@EleazarEnrique Ja kann ich. –

+0

Ich glaube nicht, dass das möglich ist. Aber Sie können benutzerdefinierte Eingabe erstellen und HTML-Eingabe ausblenden, dann JS verwenden, um Eingabewert von benutzerdefinierten Eingabe zu fühlen. Sie müssen immer noch auf die Server-Seite Werte mit Minuten senden, aber Sie können die Minuten dort abziehen –

Antwort

1

Sie können die Eingabe entweder deaktivieren oder als schreibgeschützt festlegen, um unerwartet eingegebenen Text vom Benutzer zu vermeiden.

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

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class='col-sm-6'> 
 
      <div class="form-group"> 
 
       <div class='input-group date' id='datetimepicker3'> 
 
        <input type='text' class="form-control" /> 
 
        <span class="input-group-addon"> 
 
         <span class="glyphicon glyphicon-time"></span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <script type="text/javascript"> 
 
      $(function() { 
 
       $('#datetimepicker3').datetimepicker({ 
 
        format: 'HH' 
 
       }); 
 
      }); 
 
     </script> 
 
    </div> 
 
</div>

+0

Danke, es scheint zu funktionieren. Nur eine Anmerkung, warum, wenn ich eine Stunde mit der "Auswahl" wähle, erscheint eine andere "Auswahl" mit Stunde von 00 bis 23? –

+0

Es ist nur um das Leben des Benutzers zu erleichtern. Ich meine, stellen Sie sich vor, die ersten ausgewählten Shows 13, der Benutzer sollte zehn Mal drücken, um auf 23 zu erreichen, stattdessen bietet der Bootstrap-Datumszeiger eine Möglichkeit, direkt die Stunde auszuwählen. Ich denke, Sie können dieses Verhalten deaktivieren. Gehen Sie und lesen Sie ein wenig mehr von der Dokumentation über den Date Time Picker :-). – Ele

+1

Ok, es ist kein "Bug", es ist ein gewünschtes Verhalten. Danke vielmals! –

Verwandte Themen