JavaScript usa el formato de 24 horas por defecto para DateTime. Sin embargo, el día en JavaScript se puede mostrar en formato de 12 horas AM/PM utilizando varios enfoques. Veremos un par en este artículo.
Enfoque 1:
en este enfoque, cambiaremos el formato de fecha y hora utilizando solo métodos nativos. En pocas palabras, aplicaremos el operador de módulo «%» para encontrar la hora en formato de 12 horas y usaremos el operador condicional «?:» para aplicar «AM» o «PM» .
Programa:
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<p>
Click the button to change the
format using Native method.
</p>
<div id="old_time"></div>
<script>
// JavaScript Program to display
// current time in 24-hour format
var date = new Date();
var hours = (date.getHours() < 10 ? '0' : '') +
date.getHours();
var minutes = (date.getMinutes() < 10 ? '0' : '') +
date.getMinutes();
var div = document.getElementById('old_time');
div.innerHTML = hours + ":" + minutes;
</script>
<button onclick="myFunction()">
Change
</button>
<p id="change"></p>
<script>
// JavaScript function to
// Display 12 hour format
function myFunction() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
// Check whether AM or PM
var newformat = hours >= 12 ? 'PM' : 'AM';
// Find current hour in AM-PM Format
hours = hours % 12;
// To display "0" as "12"
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0' + minutes : minutes;
document.getElementById("change").innerHTML =
hours + ':' + minutes + ' ' + newformat;
}
</script>
</center>
</body>
</html>
Antes:
Después:
Enfoque 2:
en este enfoque, utilizaremos un método incorporado toLocaleString() para cambiar el formato de la fecha dada al formato AM-PM.
toLocaleString(): Devuelve una representación de string del Objeto de fecha. Los 2 argumentos Locale y options permiten la personalización del comportamiento del método.
Sintaxis:
dateObject.toLocaleString([locales[, options]])
Programa:
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<p>Click the button to change the format.</p>
<div id="old_time"></div>
<script>
var date = new Date();
var hours = (date.getHours() < 10 ? '0' : '') +
date.getHours();
var minutes = (date.getMinutes() < 10 ? '0' : '') +
date.getMinutes();
var div = document.getElementById('old_time');
div.innerHTML = hours + ":" + minutes;
</script>
<button onclick="myFunction()">
Change
</button>
<p id="change"></p>
<script>
var now = new Date();
var hours = now.getHours();
function myFunction() {
var d = new Date();
var n = d.toLocaleString([], {
hour: '2-digit',
minute: '2-digit'
});
document.getElementById("change").innerHTML = n;
}
</script>
</center>
</body>
</html>
Antes:
Después:
Publicación traducida automáticamente
Artículo escrito por vishodushaozae y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA