entrées de temps html5 montre 12 heures

Entrée du temps HTML5

Celui-ci est le plus simple des types de date / heure, permettant à l’utilisateur de sélectionner une heure sur une horloge de 24 heures , sans AM ou PM . La valeur renvoyée est les heures: minutes qui ressembleront à 14:30.

Cette fonctionnalité est toujours en brouillon. Chaque navigateur le montre différemment.

– Opera (Presto Engine) le montre correctement.
– Chrome (Webkit Engine) le montre en AM / PM.
– Firefox (Gecko Engine) ne montre rien, mais valide.
– Edge affiche toutes les valeurs requirejses dans une fenêtre de type popover

Avec les brouillons HTML5, input type=time crée un contrôle pour l’heure de la saisie du jour, qui devrait être implémenté à l’aide de «la présentation préférée de l’utilisateur». Mais cela signifie vraiment utiliser un widget où la présentation du temps suit les règles de l’ environnement local du navigateur . Ainsi, indépendamment de la langue du contenu environnant, la présentation varie selon la langue du navigateur, la langue du système d’exploitation sous-jacent ou les parameters régionaux du système (selon le navigateur). Par exemple, en utilisant une version en langue finnoise de Chrome, le widget utilise l’horloge standard de 24 heures. Votre kilométrage variera.

Ainsi, input type=time est basé sur une idée de localisation qui élimine tout ce qui échappe à l’auteur de la page. C’est intentionnel le problème a été soulevé dans les discussions HTML5 à plusieurs resockets, avec le même résultat: pas de changement. (Sauf éventuellement clarifications apscopes au texte, ce comportement étant décrit comme prévu.)

Notez que les atsortingbuts de pattern et d’ placeholder ne sont pas autorisés dans input type=time . Et placeholder="hrs:mins" , s’il était implémenté, serait potentiellement trompeur. Il est fort possible que l’utilisateur doive taper 12.30 (avec un point) et non 12h30, lorsque les parameters régionaux du navigateur utilisent «.» Comme séparateur dans les temps.

Ma conclusion est que vous devez utiliser input type=text , avec l’atsortingbut pattern et avec un code JavaScript qui vérifie que l’entrée est correcte sur les navigateurs qui ne prennent pas en charge l’atsortingbut pattern mode natif.

Cela dépend des parameters de l’heure de votre système local, faites 24 heures, il vous montrera 24 heures.

Cela dépend du format de l’heure du système d’exploitation de l’utilisateur lorsque le navigateur Web a été lancé .

Alors:

• Si les préférences système de votre ordinateur sont configurées pour utiliser une horloge de 24 heures, le navigateur affichera l’élément comme --:-- (plage de temps: 00: 00–23: 59).
• Si vous modifiez les préférences système de votre ordinateur pour utiliser 12 heures, la sortie ne changera pas tant que vous n’aurez pas quitté et relancé le navigateur. Ensuite, il passera à --:-- -- (plage de temps: 12h00-23h59).

Et (au moment d’écrire ces lignes ), la prise en charge du navigateur est seulement d’environ 75% ( caniuse ). Yay: Edge, Chrome, Opera, Android. Boo: IE, Firefox, Safari).

Le support de ce type est encore très pauvre. Opera le montre comme vous le souhaitez. Chrome 23 le montre avec les secondes et AM / PM, dans la version 24 (twig dev à ce moment), il se débarrassera des secondes (si possible), mais aucune information sur AM / PM.
Ce n’est pas ce que vous voulez, mais à ce stade, la seule option que je vois pour obtenir votre format de sélecteur de temps est l’utilisation de JavaScript.

Si vous êtes capable / désireux d’utiliser un composant minuscule, j’ai écrit ce Timepicker – https://github.com/jonataswalker/timepicker.js – pour mes propres besoins.

L’utilisation est comme ceci:

 var timepicker = new TimePicker('time', { lang: 'en', theme: 'dark' }); var input = document.getElementById('time'); timepicker.on('change', function(evt) { var value = (evt.hour || '00') + ':' + (evt.minute || '00'); evt.element.value = value; }); 

 body { font: 1.2em/1.3 sans-serif; color: #222; font-weight: 400; padding: 5px; margin: 0; background: linear-gradient(#efefef, #999) fixed; } input { padding: 5px 0; font-size: 1.5em; font-family: inherit; width: 100px; } 

HTML fournit uniquement input type="time" Si vous utilisez bootstrap, vous pouvez utiliser timepicker. Vous pouvez obtenir le code de cette URL http://jdewit.github.io/bootstrap-timepicker Peut-être que cela vous aidera

Même si vous voyez le temps au format HH: MM AM / PM, sur le backend, il fonctionne toujours au format 24 heures, vous pouvez essayer d’utiliser un javascript de base pour voir cela.

vous pouvez essayer cela pour le côté html

 Choose Time  {{displayTime}} 

Côté JavaScript

 function addMinutes(time/*"hh:mm"*/, minsToAdd/*"N"*/) { function z(n) { return (n<10? '0':'') + n; } var bits = time.split(':'); var mins = bits[0]*60 + (+bits[1]) + (+minsToAdd); return z(mins%(24*60)/60 | 0) + ':' + z(mins%60); } $scope.ChangeTime=function() { var d = new Date($scope.time); var hours=d.getHours(); var minutes=Math.round(d.getMinutes()); var ampm = hours >= 12 ? 'PM' : 'AM'; var Time=hours+':'+minutes; var DisplayTime=addMinutes(Time, duration); $scope.displayTime=Time+' - '+DisplayTime +' '+ampm; }