0

Estoy intentando hacer una especie de agenda diaria que pueda cambiar el día. Resulta que al pulsar en el > o < en lugar de restar o sumar un día a la fecha actual (en días) lo saca en la parte del año. Por ejemplo, hoy es 7, me gustaría que al darle al < me saque 6 en el día, pero en lugar de eso lo saca en la parte del año. Agradecería ayuda de vuestra parte, gracias de antemano.

var actual = new Date();

function mostrarCalendario(year, month) {
    var now = new Date(year, month - 1, 1);
    var last = new Date(year, month, 0);
    var primerDiaSemana = (now.getDay() == 0) ? 7 : now.getDay();
    var ultimoDiaMes = last.getDate();
    var dia = actual.getDate();
    var resultado = "<tr>";

    var diaActual = 0;
    console.log(ultimoDiaMes);
    var a = 0;
    var b = ++a;
    var last_cell = primerDiaSemana + ultimoDiaMes;

    // hacemos un bucle hasta 42, que es el máximo de valores que puede
    // haber... 6 columnas de 7 dias 
    var meses = Array("ENERO", "FEBRERO", "MARZO", "ABRIL", "MAYO", "JUNIO", "JULIO", "AGOSTO", "SEPTIEMBRE", "OCTUBRE", "NOVIEMBRE", "DICIEMBRE");



    // Calculamos el siguiente mes y año
    nextMonth = month + 1;
    nextYear = year;

    if (month + 1 > 12) {
        nextMonth = 1;
        nextYear = year + 1;
    }

    // Calculamos el anterior mes y año
    prevMonth = month - 1;
    prevYear = year;
    if (month - 1 < 1) {
        prevMonth = 12;
        prevYear = year - 1;
    }
    if (month + 1 > 12) {
        meses[month] = meses[0];
    }
    if (month + 1 > 12) {
        meses[month + 1] = meses[1];
    }
    if (month >= 11 && month < 12) {
        meses[month] = meses[11];
        meses[month + 1] = meses[0];
    }
    if (month - 1 < 1) {
        meses[month - 2] = meses[11];
        meses[month - 3] = meses[10];
    }
    if (month - 1 > 0 && month - 1 <= 1) {
        meses[month - 2] = meses[0];
        meses[month - 3] = meses[11];
    }
    nextDay = dia + 1;
    prevDay = dia - 1;
    //document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML="<div>"+meses[month-1]+" / "+year+"</div><div><a onclick='mostrarCalendario("+prevYear+","+prevMonth+")'>&lt;</a></div><div><a onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>&gt;</a></div>";
    document.getElementById("calendar").getElementsByTagName("tbody")[0].innerHTML = resultado;
    document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML = "<div>" + year + "</div><div>" + meses[month - 1] + "</div><div><a onclick='mostrarCalendario(" + prevDay + ")'>&lt;</a></div><div><a onclick='mostrarCalendario(" + nextYear + "," + nextMonth + ")'>&gt;</a></div><div>" + dia + "</div>";

}
mostrarCalendario(actual.getFullYear(), actual.getMonth() + 1, actual.getDate());
#calendar {
     font-family:Arial;
     font-size:12px;
}
 #calendar caption {
     text-align:center;
     padding:5px 10px;
     background-color:white;
     font-weight:bold;
     font-size:medium;
     margin-bottom: 30px;
}
 #calendar caption div:nth-child(1) {
     margin-bottom: 10px;
     text-align: center;
}
 #calendar caption div:nth-child(2) {
     display: inline;
     margin-top: 5px;
     width: 20%;
}
 #calendar caption div:nth-child(3) {
    text-align: left;
     float: left;
     color: #cccccc;
}
 #calendar caption div:nth-child(4) {
    text-align: right;
     float: right;
     color: #cccccc;
}
 #calendar caption div:nth-child(5) {
     float: left;
     width: 20%;
}
 #calendar caption div:nth-child(3) a {
    cursor:pointer;
}
 #calendar caption div:nth-child(4) a {
    cursor:pointer;
}
 #calendar th {
     background-color:white;
     padding: 22px;
     width:40px;
}
 #calendar td {
     text-align:center;
     padding:2px 5px;
     background-color:white;
     font-size:20px;
     color: black;
}
 #calendar .negro {
     color: black;
}
 #calendar td:nth-child(7) a {
     color:red;
}
 #calendar td:nth-child(7) a.red {
     color:#fd9292;
}
a {
    color:black;
     text-decoration:none
}
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <script src="js/diario.js"></script>
</head>

<body>
    <center>
        <table id="calendar">
            <p>
                <caption></caption>
                <thead>
                </thead>
                <tbody>
                </tbody>
        </table>
    </center>
</body>

</html>

3
  • Ya lo había visto pero no me ha servido, gracias por tu gran ayuda Commented el 7 jun. 2018 a las 17:14
  • @JackNavaRow, la respuesta que indicaste trata de hallar la diferencia entre 2 fechas, no se relaciona con la pregunta. Commented el 7 jun. 2018 a las 17:29
  • @the-breaker hay mas ejemplos Commented el 7 jun. 2018 a las 17:30

2 respuestas 2

1

Tu codigo es complicado. Yo lo haria mucho mas simple usando algun plugin, pero aqui te va una solucion usando tu codigo. Otra vez, por las restricciones que tu mismo creaste, este codigo solo te funciona en el mes actual, pero agregando mas logica, puedes hacerlo funcionar para el cambio del mes.

var actual = new Date();

function mostrarCalendario(year, month, dia) {
    var now = new Date(year, month - 1, 1);
    var last = new Date(year, month, 0);
    var primerDiaSemana = (now.getDay() == 0) ? 7 : now.getDay();
    var ultimoDiaMes = last.getDate();
    
    var resultado = "<tr>";

    var diaActual = 0;
    console.log(ultimoDiaMes);
    var a = 0;
    var b = ++a;
    var last_cell = primerDiaSemana + ultimoDiaMes;

    // hacemos un bucle hasta 42, que es el máximo de valores que puede
    // haber... 6 columnas de 7 dias 
    var meses = Array("ENERO", "FEBRERO", "MARZO", "ABRIL", "MAYO", "JUNIO", "JULIO", "AGOSTO", "SEPTIEMBRE", "OCTUBRE", "NOVIEMBRE", "DICIEMBRE");



    // Calculamos el siguiente mes y año
    nextMonth = month + 1;
    nextYear = year;

    if (month + 1 > 12) {
        nextMonth = 1;
        nextYear = year + 1;
    }

    // Calculamos el anterior mes y año
    prevMonth = month - 1;
    prevYear = year;
    if (month - 1 < 1) {
        prevMonth = 12;
        prevYear = year - 1;
    }
    if (month + 1 > 12) {
        meses[month] = meses[0];
    }
    if (month + 1 > 12) {
        meses[month + 1] = meses[1];
    }
    if (month >= 11 && month < 12) {
        meses[month] = meses[11];
        meses[month + 1] = meses[0];
    }
    if (month - 1 < 1) {
        meses[month - 2] = meses[11];
        meses[month - 3] = meses[10];
    }
    if (month - 1 > 0 && month - 1 <= 1) {
        meses[month - 2] = meses[0];
        meses[month - 3] = meses[11];
    }
    nextDay = dia + 1;
    prevDay = dia - 1;
    //document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML="<div>"+meses[month-1]+" / "+year+"</div><div><a onclick='mostrarCalendario("+prevYear+","+prevMonth+")'>&lt;</a></div><div><a onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>&gt;</a></div>";
    document.getElementById("calendar").getElementsByTagName("tbody")[0].innerHTML = resultado;
    document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML = "<div>" + year + "</div><div>" + meses[month - 1] + "</div><div><a onclick='mostrarCalendario(" + year + "," + month + ","+ prevDay + ")'>&lt;</a></div><div><a onclick='mostrarCalendario(" + year + "," + month + "," + nextDay + ")'>&gt;</a></div><div>" + dia + "</div>";

}
mostrarCalendario(actual.getFullYear(), actual.getMonth() + 1, actual.getDate());
#calendar {
     font-family:Arial;
     font-size:12px;
}
 #calendar caption {
     text-align:center;
     padding:5px 10px;
     background-color:white;
     font-weight:bold;
     font-size:medium;
     margin-bottom: 30px;
}
 #calendar caption div:nth-child(1) {
     margin-bottom: 10px;
     text-align: center;
}
 #calendar caption div:nth-child(2) {
     display: inline;
     margin-top: 5px;
     width: 20%;
}
 #calendar caption div:nth-child(3) {
    text-align: left;
     float: left;
     color: #cccccc;
}
 #calendar caption div:nth-child(4) {
    text-align: right;
     float: right;
     color: #cccccc;
}
 #calendar caption div:nth-child(5) {
     float: left;
     width: 20%;
}
 #calendar caption div:nth-child(3) a {
    cursor:pointer;
}
 #calendar caption div:nth-child(4) a {
    cursor:pointer;
}
 #calendar th {
     background-color:white;
     padding: 22px;
     width:40px;
}
 #calendar td {
     text-align:center;
     padding:2px 5px;
     background-color:white;
     font-size:20px;
     color: black;
}
 #calendar .negro {
     color: black;
}
 #calendar td:nth-child(7) a {
     color:red;
}
 #calendar td:nth-child(7) a.red {
     color:#fd9292;
}
a {
    color:black;
     text-decoration:none
}
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <script src="js/diario.js"></script>
</head>

<body>
    <center>
        <table id="calendar">
            <p>
                <caption></caption>
                <thead>
                </thead>
                <tbody>
                </tbody>
        </table>
    </center>
</body>

</html>

5
  • Espera un momento, ya entendí lo que quiere, si por ejemplo esta en 1 de junio y presiona < la fecha debería decir 31 de mayo, el código de tu respuesta da 0 y negativos. Commented el 7 jun. 2018 a las 17:28
  • Entonces el fallo estaba en las últimas líneas del javascript? Era eso que no me salía...Muchas gracias por tu ayuda, ahora supongo que podré solucionar para que me sirva todos los meses. Commented el 7 jun. 2018 a las 17:28
  • Correcto @the-breaker. Eso es lo que dice mi respuesta, la logica para el cambio del mes es sencilla, solo que no quiero hacerlo todo por OP
    – alanfcm
    Commented el 7 jun. 2018 a las 17:32
  • Si si, muchas gracias @alanfcm , me había quedado atascado en esa parte, supongo que si que podré sacar para lo del mes. Commented el 7 jun. 2018 a las 17:34
  • Problema a la vista .... @alanfcm , he modificado el código pero cuando llega a 30, pasa a 1 de julio, eso correcto. Pero cuando quiero pasar a 2 de julio me vuelve a 2 de junio...igual que cuando paso de 30 de mayo me devuelve a junio... supongo que tiene que ver con el caption del final... Commented el 7 jun. 2018 a las 18:01
0

Te sugiero que ocupes esta funcion que cree y ocupo personalmente en donde le pasas como param una fecha y la cantidad de dias que necesitas sumar, donde te va retornar una fecha final.

function sumDias(fecha, numDias) {
    fecha.setDate(fecha.getDate() + numDias);
    return fecha;
}

Para pasar el primer parámetro basta con que utilices un new Date(); o bien crees una var que contenga la fecha actual y se la pases a la function.

Call:

var date = new Date();

sumDias(date, 10);

en el return deberías tener la fecha 17-06-2018

5
  • Pero yo lo que quiero es que al pulsar el > me sume +1 automáticamente, no tener que indicarle yo los días a sumar...es decir que si estamos a 7, al pulsar el > me muestre 8...y si vuelvo a pulsar pues 9...no sé si me explico bien, hacerlo lo hace lo que pasa que lo hace donde está el año en lugar del día..gracias por tu ayuda Commented el 7 jun. 2018 a las 17:14
  • 1
    Entonces esta mal formulada tu pregunta en el titulo.
    – vicasas
    Commented el 7 jun. 2018 a las 17:24
  • Eso es porque no has leído la pregunta... Commented el 7 jun. 2018 a las 17:26
  • Si la leí pero era confusa, por un lado en el titulo tenias algo de como sumar o restar una fecha pero en el cuerpo de tu pregunta tenias otro problema, por eso mande una edición de tu pregunta en el titulo. Saludos (:
    – vicasas
    Commented el 7 jun. 2018 a las 17:31
  • Tienes razón, quizá el título no estaba bien expresado. Alan me ha ayudado ya, voy a intentar modificar su código a ver si puedo solucionarlo, muchas gracias de todas formas. Commented el 7 jun. 2018 a las 17:33

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