Mostrar la fecha y hora actuales usando jQuery
- Obtenga la fecha y hora actuales usando jQuery
-
Objeto
Fechaen JavaScript - Obtenga la fecha actual usando jQuery
- Obtenga la hora actual usando jQuery
Este tutorial analizará la visualización de la fecha y la hora en nuestros sitios web. Examinaremos el objeto Date de JavaScript en profundidad.
Nuestro enfoque principal será recuperar la fecha y la hora en varias formas usando jQuery.
Obtenga la fecha y hora actuales usando jQuery
La visualización de la fecha y la hora en las páginas web es una característica muy fácil de usar. Algunos sitios web actualizan a sus lectores sobre varios temas, como el estado político del país o un sitio web de un periódico en línea con una fecha, ya que los periódicos tienen información que cambia diariamente.
Buscar y leer cualquier blog o noticia específica es fácil con la fecha y la hora mencionadas. Entonces, hoy hablaremos sobre cómo podemos agregar una función de fecha y hora a nuestro sitio web.
Objeto Fecha en JavaScript
JavaScript proporciona el objeto Fecha para trabajar con fechas y horas en nuestras aplicaciones o páginas web. El objeto Fecha tiene numerosos métodos para establecer, obtener y modificar fechas.
El objeto Fecha se crea como:
var date = new Date();
Si observamos la salida de la variable fecha, veremos:
Como se muestra en la imagen de arriba, muestra la fecha, la hora y el día de la semana actuales. También podemos llamarlo función sin usar la palabra clave nuevo, como Fecha(), que devolverá una representación de cadena de la fecha y hora actuales.
Hablaremos sobre cómo obtener la fecha y la hora individualmente en diferentes formatos usando jQuery porque la forma anterior obtiene la fecha y la hora juntas. Veamos otras opciones para obtenerlos por separado.
Obtenga la fecha actual usando jQuery
Como vimos antes, la nueva Fecha() devuelve el día, la fecha y la hora, pero ¿y si queremos mostrar un día o una fecha por separado? ¿Cómo vamos a hacer eso?
El objeto Date tiene métodos independientes para obtener el día, la fecha, el mes y el año. Echemos un vistazo más de cerca a ellos.
getDay(): este método devuelve el día de la semana para la fecha dada, de acuerdo con la hora local, y el domingo se denota con el valor 0.getDate(): esta función devuelve el día del mes para la fecha especificada o actual según la hora local.getMonth(): Devuelve el mes de la fecha dada según la hora local como valor numérico donde 0 indica el primer mes del año.getFullYear(): este método devuelve el año de la fecha especificada en la hora local.
Los métodos getDay() y getMonth() proporcionan un valor numérico, pero es posible que deseemos mostrar el día y el mes con sus nombres en nuestro sitio web, así que profundicemos y veamos cómo podemos hacerlo.
Obtener el nombre del día
Para obtener el día de la semana, tenemos el método getDay(), pero devuelve un valor numérico de 0 a 6, donde 0 representa el domingo, 1 el lunes, y así sucesivamente. No queremos que nuestras páginas web digan hoy es 0.
Necesitamos el nombre del día. Mire el código a continuación para ver cómo podemos lograr esto.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var day_names= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
var date = new Date();
$("#currentDay").text("Today is: " + day_names[date.getDay()]);
});
</script>
</head>
<body>
<p id="currentDay"></p>
</body>
</html>
Producción:
El código anterior es fácil de entender. Hicimos una serie de nombres de días de la semana y asignamos el domingo al índice 0, el lunes al índice 1, y así sucesivamente.
Cuando la función getDay() devuelve un número, usaremos ese número como un índice en la matriz para recuperar el valor en ese índice.
Obtener el nombre del mes
La función getMonth() da un valor numérico entre 0 y 11, donde 0 representa enero, 1 representa febrero, y así sucesivamente. El objeto Date no incluye una función para obtener el nombre del mes, y es posible que necesitemos mostrar la fecha con el nombre del mes.
Utilizaremos el mismo método que usamos para determinar los nombres de los días de la semana. Examine el código a continuación.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var month_names = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var date = new Date();
$("#currentMonth").text("Present Month is: " + month_names[date.getMonth()]);
});
</script>
</head>
<body>
<p id="currentMonth"></p>
</body>
</html>
Producción:
Mostrar la fecha en el formato (fecha, mes, año)
Ya hemos discutido cómo recuperar el día de la semana o el mes por su nombre. Veamos cómo podemos mostrar la fecha en el formato de fecha, mes y año.
Puede experimentar con diferentes formas de su elección una vez que aprenda a presentar en un formato.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var month_names = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var date = new Date();
$("#dateFormat").text(date.getDate() + " " + month_names[date.getMonth()] + ", " + date.getFullYear());
});
</script>
</head>
<body>
<p id="dateFormat"></p>
</body>
</html>
Producción:
Obtenga la hora actual usando jQuery
El objeto Fecha de JavaScript proporciona un método estático para obtener la hora actual. Los métodos estáticos no se unen a los objetos de una clase y se pueden llamar de forma independiente solo con un nombre de clase.
El método estático Date.now() devuelve el valor numérico correspondiente a la hora actual.
Date.now()
Producción:
El tiempo se devuelve en milisegundos. Esta no es una forma muy legible de mostrar la hora en nuestras páginas web.
Deseamos mostrar la hora en el formato horas: minutos: segundos. Analicemos cómo podemos obtener el tiempo en la forma deseada.
Puede haber muchos formatos en los que desee mostrar la hora en su sitio web. Discutiremos las dos formas principales, es decir, 24 horas y 12 horas, y después de eso, obtendrá una buena comprensión y podrá recuperar la hora en cualquier formato de su elección.
En formato de 24 horas (Horas: Minutos: Segundos)
El objeto Fecha nos proporciona diferentes formas de obtener la hora de la fecha especificada. Exploremos cada método en detalle.
getHours(): este método devuelve la hora por hora local.getMinutes(): Este método devuelve los minutos por hora local.getSeconds(): este método devuelve los segundos por hora local.
Usando estos tres métodos, podemos mostrar fácilmente la hora en nuestro formato requerido. Verifique el código a continuación para tener una comprensión clara.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var date = new Date();
$("#24HFormat").text(date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
});
</script>
</head>
<body>
<p id="24HFormat"></p>
</body>
</html>
Producción:
De forma predeterminada, estos métodos de objeto Fecha devuelven la hora en formato de 24 horas. Así es como podemos mostrar fácilmente la hora en nuestro formato requerido en nuestros sitios web.
En formato de 12 horas (hh: mm: ss)
Las funciones para obtener las horas, los minutos y los segundos ya se cubrieron en el método anterior y aprendimos que estas funciones devuelven el formato de 24 horas. Ahora necesitamos convertir el formato de 24 horas al formato de 12 horas.
Examine el código siguiente para entenderlo correctamente.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var date = new Date();
var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
var am_pm = date.getHours() >= 12 ? "PM" : "AM";
hours = hours < 10 ? "0" + hours : hours;
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
time = hours + ":" + minutes + ":" + seconds + " " + am_pm;
$("#12HFormat").text(time);
});
</script>
</head>
<body>
<p id="12HFormat"></p>
</body>
</html>
Producción:
Puede suponer que esto es mucha codificación, pero es sencillo. Repasemos en detalle lo que estamos haciendo en el código.
Primero, para convertir la hora a formato de 12 horas, comprobamos si el valor devuelto por el método getHours() es mayor que 12 y, de ser así, le restamos 12. En segundo lugar, decidimos entre AM y PM comprobando si las horas son mayores o iguales a 12, luego mostramos PM. De lo contrario, AM.
En las siguientes tres líneas de código, solo estamos verificando si el valor es menor que 10, agregue 0 para que pueda mostrarse como 01 o 02, etc.