¿Cómo obtener la diferencia entre dos fechas en días usando jQuery?

En este artículo, aprenderemos cómo encontrar la diferencia entre las 2 fechas en días usando jQuery. Aquí, tomaremos la entrada de las fechas usando un jquery datepicker .

Teniendo en cuenta las 2 fechas de entrada proporcionadas a continuación, debemos calcular la diferencia entre ellas, que se devolverá en varios días.

Input : 02/17/2022
02/10/2022
Output: 7

Para ello utilizaremos algunas funciones como el método getTime() , Date() en el código. Discutiremos ambos métodos secuencialmente.

getTime(): Devuelve el número de milisegundos desde el 1 de enero de 1970 00:00:00. Este método no acepta ningún argumento.

Sintaxis:

Date.getTime();

Date(): los objetos Date se crean con el nuevo constructor Date(). Todos los argumentos pasados ​​a Date() son opcionales.

Sintaxis:

new Date(year, month, day, hours, minutes, seconds, milliseconds)

Selector de fecha de jQuery: se utiliza un selector de fecha de jQuery UI para proporcionar un calendario para que el usuario seleccione la fecha de un calendario. 

Sintaxis:

$( selector ).datepicker();

Acercarse: 

  • Tome dos fechas como entrada usando datepicker .
  • Ahora, conviértalos en tipos de fecha usando el método Date() .
  • Al usar getTime() en ambas fechas, obtendremos la cantidad de milisegundos desde el 1 de enero de 1970 a las 00:00:00.
  • Calcula la diferencia absoluta entre los milisegundos de dos fechas.
  • Convierta los milisegundos a días usando la siguiente fórmula
days = milliseconds / (1000 * 36000 * 24)

Ejemplo : este ejemplo ilustra cómo obtener la diferencia entre 2 fechas en días usando jQuery.

HTML

<html lang="en">
 
<head>
    <meta charset="utf-8">
    <title>Difference between dates in days</title>
    <link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
          rel="stylesheet">
    <script src=
"https://code.jquery.com/jquery-1.10.2.js">
    </script>
    <script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script>
    <script>
        $(function() {
            $("#date1").datepicker();
            var date1 = $("#date1")
        });
        $(function() {
            $("#date2").datepicker();
            var date2 = $("#date2")
        });
     
        function func() {
            date1 = new Date(date1.value);
            date2 = new Date(date2.value);
            var milli_secs = date1.getTime() - date2.getTime();
             
            // Convert the milli seconds to Days 
            var days = milli_secs / (1000 * 3600 * 24);
            document.getElementById("ans").innerHTML =
            Math.round(Math.abs(days));
        }
    </script>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Calculating the difference between the 2 dates</h3>
     
<p>Enter Date 1 :
        <input type="text" id="date1">
    </p>
 
 
     
<p>Enter Date 2 :
        <input type="text" id="date2">
    </p>
 
 
    <button id="sub"
            onclick="func()"
            type="button"> Submit
    </button>
    <h3 id="ans">Difference in days</h3>
</body>
</html>

Producción:

Calculadora de fecha jQuery

Publicación traducida automáticamente

Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *