5

Intento obtener el rango de valores entre 2 fechas usando moment.js , pero al momento de usar un alert la alerta se lanza pero no imprime los valores , hay alguna forma de solucionarlo? o el error es el formato que el html le entrega al js?

    <!doctype html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    
        <title>Hello, world!</title>
      </head>
      <body>
        <input id="fechauno" type="date">
        <input id="fechados" type="date">
    
        <!-- Optional JavaScript -->
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.min.js"></script>
        <script>
        var diasEntreFechas = function(desde, hasta) {
        var dia_actual = desde;
        var fechas = [];
        while (dia_actual.isSameOrBefore(hasta)) {
            fechas.push(dia_actual.format('DD-MM-YYYY'));
            dia_actual.add(1, 'days');
        }
        return fechas;
    };
    fechaini=document.getElementById(fechauno);
    fechafin=document.getElementById(fechados);
    var desde = moment("fechaini");
    var hasta = moment("fechafin");
    var results = diasEntreFechas(desde, hasta);
    alert(results);
            
        </script>
      </body>
    </html>

0

3 respuestas 3

7

Tienes básicamente estos errores:

  • Ejecutas el script al nada más cargar la página, cuando los input's están vacíos. Debes esperar a que tengan algún valor para ejecutarlos, por eso mismo he puesto tu código principal en una función y he agregado un botón para invocarlo.

  • Haces referencia a elementos del DOM con la función getElementById, pero de la forma en que está escrito, a la función le pasas variables que no existen en ese momento. He encerrado entre comillas los nombres para pasar el valor literal.

  • Una vez tienes los elementos del DOM, lo que te interesa es el valor que tienen y no el elemento como tal, por eso he agregado el miembro .value, después de obtener el elemento.

  • Invocas la función moment con valores literales y no con las variables donde, en ese momento, ya tienes los valores. He quitado las comillas para pasar los valores de las variables.

He hecho cambios menores al código para que puedas ejecutarlo aquí mismo en la respuesta.

var diasEntreFechas = function(desde, hasta) {
    var dia_actual = desde;
    var fechas = [];
    while (dia_actual.isSameOrBefore(hasta)) {
        fechas.push(dia_actual.format('DD-MM-YYYY'));
        dia_actual.add(1, 'days');
    }
    return fechas;
};

function buttonClick() {
  var fechaini=document.getElementById("fechauno").value;
  var fechafin=document.getElementById("fechados").value;
  console.log(fechaini);
  console.log(fechafin);
  var desde = moment(fechaini);
  var hasta = moment(fechafin);
  var results = diasEntreFechas(desde, hasta);
  alert(results);
}
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>¡Hola mundo!</title>
  </head>
  <body>
    <input id="fechauno" type="date" />
    <input id="fechados" type="date" />
    <button onClick="buttonClick()">Presioname</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.min.js"></script>
  </body>
</html>

1
  • Conociéndote, me sorprende que no hayas hecho una validación para saber si uno o ambos campos están vacíos o ver que la alerta se muestra vacía y se soluciona con una simple "desestructuración". No te voto negativo porque no es mi costumbre y la respuesta es una buena aproximación.
    – Triby
    el 28 jul. 2020 a las 2:04
3

Hay algunos ajustes que hacer para lograr obtener un valor de fecha valido/

// los ids son texto por lo que van entre comillas
fechaini=document.getElementById("fechauno");
fechafin=document.getElementById("fechados");
// el valor de fecha se obtienen de la propiedad `value` del input.
var desde = moment(fechaini.value);
var hasta = moment(fechafin.value);

Al ejecutar el calculo al iniciar, no hay fechas por lo que tampoco entregaría algun valor valido. Agregué valores de inicio para demostrar como funciona al cargar.

EL codigo corregido con algunos ajustes quedaria asi.

var diasEntreFechas = function(desde, hasta) {
    var dia_actual = desde;
    var fechas = [1,2,3];
    while (dia_actual.isSameOrBefore(hasta)) {
      fechas.push(dia_actual.format('DD-MM-YYYY'));
        dia_actual.add(1, 'days');
    } 
    alert(dia_actual); 
    return fechas;
};
function calculate(){
  fechaini=document.getElementById("fechauno");
  fechafin=document.getElementById("fechados");
  var desde = moment(fechaini.value);
  var hasta = moment(fechafin.value);
  var results = diasEntreFechas(desde, hasta); 
  alert(results);
}

calculate();
    <linxk rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment.min.js"></script>

    <input id="fechauno" value="2020-06-01" type="date">
    <input id="fechados" value="2020-06-30" type="date">
   <input type="button" value="Calculate" onclick="calculate()" >

Ver https://codepen.io/fraigo/pen/jOWoqPK

0
Prueba con estos cambios:

<input id="fechauno" value="2020-03-01" type="date"/>
<input id="fechados" value="2020-07-12" type="date"/>

fechaini = document.getElementById("fechauno").value;
fechafin = document.getElementById("fechados").value;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.