Comment puis-je transmettre la valeur d'une entrée de type de temps pour un objet Date?

Cette fonction convertit le temps de format 12 heures, crédits à un contributeur sur un Débordement de Pile pour cette fonction:

JS

function ampm(date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? 'pm' : 'am';
    hours = hours % 12;
    hours = hours ? hours : 12; //0 should be 12
    minutes = minutes < 10 ? '0'+minutes : minutes; //if minutes less than 10, add a 0 in front of it ie: 6:6 -> 6:06
    var strTime = hours + ':' + minutes + ' ' + ampm;
    document.getElementById('time').value = strTime;
    return strTime;
}

////This is how the value of the time input is supposed to be displayed in 12 hr format
_("display_time").innerHTML = ampm(new Date());

HTML

<!--This is the input field where a user selects a time-->
<input id="time" placeholder="Time" type="time" name="time" />




<!--This is where the value of the time input is supposed to be displayed in 12 hr format-->>
<span id="display_time"></span>

Ma question est comment puis-je obtenir la valeur du champ de saisie durée pour être affiché sur la balise span dans le format 12 heures. Ce code est semi-travail.

Il affiche l'heure en format 12 heures, mais seulement affiche l'heure actuelle. Le flux graphique serait quelque chose comme, l'utilisateur sélectionne temps en temps input -> certains JS pour les convertir au format 12 heures -> affichage format 12 heures dans la balise span. Des conseils ou des suggestions?

Pour être honnête, il me semble que vous êtes compliquer votre vie. Il y a beaucoup de stackoverflow questions concernant le temps et la date d'objets de proposer des solutions plus simples. Il suffit de chercher un peu.
Comment envisagez-vous de permettre à l'utilisateur de "temps en temps"? Quel est le format de l'époque(chaîne de caractères? de temps? timestamp?)
Voir ce stackoverflow.com/questions/4904667/...

OriginalL'auteur Arvin Flores | 2015-08-21

  1. 1

    Quelque chose comme cela fera

    function showTime() {
    //Grab the time and split into hrs and mins
    var time = document.getElementById("time");
    if ( time.value === "")  {
        document.getElementById("mySpan").innerHTML = "";
        return false;
    }
    var hrs = time.value.split(":")[0];
    var mins = time.value.split(":")[1];
    var newTime = ampm(hrs, mins);
    document.getElementById("mySpan").innerHTML = newTime;
}

function ampm(hrs, mins) {
    return ( hrs % 12 || 12 ) + ":" + mins + (( hrs >= 12 ) ? "PM" : "AM" );
}

    Ici est un exemple. showTime() juste besoin d'être couru onchange du temps d'entrée.

    Qui serait à l'œuvre à l'exception de vous encore besoin d'un état séparé pour les 12 que quand il est plus grand que 12 nous avons besoin de supprimer 12 pour représenter une horloge de 12 heures
    J'ai fait un edit. Il est un peu plus élégant, merci
    (function(h,m){return(h%12||12)+':'+m+(h<12?'am':'pm')}.apply([],'13:08'.split(':')))

    OriginalL'auteur Mark Walters

  2. 1

    Votre valeur d'entrée sera une chaîne de caractères, pas un jour. J'ai mis en place un jsfiddle où j'ai modifié l'option javascript de votre travail sur une chaîne de caractères.

    $('#time').on('change', function() {
    var date = $('#time').val().split(':');

    var hours = date[0];
    var minutes = date[1];

    $('#display_time').text(ampm(hours, minutes));
});

function ampm(hours, minutes) {
    var ampm = hours >= 12 ? 'pm' : 'am';
    hours = hours % 12 || 12;
    minutes = minutes || 0;
    minutes = minutes < 10 ? '0'+minutes : minutes;
    return hours + ':' + minutes + ' ' + ampm;
}

    OriginalL'auteur James Brierley