Come si passa il valore di un tempo di tipo di input a un oggetto Date?

Question

Questa funzione converte il tempo di 12 ore formato, crediti per un collaboratore su Stack Overflow per questa funzione:

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> 

mia domanda è come fare Ricevo il valore del campo di immissione del tempo da visualizzare sul tag span in formato 12 ore. Questo codice è semi-funzionante.

Visualizza l'ora nel formato 12 ore ma visualizza solo l'ora corrente. Il diagramma di flusso sarebbe qualcosa di simile, l'utente seleziona l'input temporale nel tempo -> qualche JS per convertire in formato 12 ore -> visualizza come formato 12 ore nel tag span. Qualche consiglio o suggerimento?

Answer 1

Non c'è alcuna necessità di utilizzare Date ei suoi metodi l'ingresso è un String quindi è meglio utilizzare .split(":") metodo e si otterrà direttamente i valori hours e minutes.

Poi basta testare se i loro valori sono inferiori a 10 aggiungere un leader 0 e se il hours è superiore 12 uso pm suffisso o utilizzare am altrimenti.

Questa è una dimostrazione dal vivo utilizzando onchange evento dell'ingresso tempo con il suo valore come parametro di onchange="ampm(this.value):

function ampm(time) { 
 

 
    console.log(time); 
 
    if (time.value !== "") { 
 
    var hours = time.split(":")[0]; 
 
    var minutes = time.split(":")[1]; 
 
    var suffix = hours >= 12 ? "pm" : "am"; 
 
    hours = hours % 12 || 12; 
 
    hours = hours < 10 ? "0" + hours : hours; 
 

 
    var displayTime = hours + ":" + minutes + " " + suffix; 
 
    document.getElementById("display_time").innerHTML = displayTime; 
 
    } 
 
}

<!--This is the input field where a user selects a time--> 
 
<input id="time" placeholder="Time" type="time" name="time" onchange="ampm(this.value)" /> 
 
<span id="display_time"></span>

Answer 2

Il valore inserito sarà una stringa, non una data. Ho impostato uno jsfiddle in cui ho modificato il tuo javascript per lavorare su una stringa.

$('#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; 
} 

Answer 3

Qualcosa di simile lo farà

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"); 
} 

Here è un esempio. showTime() deve solo essere eseguito su cambio dell'ora immessa.