Add or subtract the date with buttons in javascript [duplicated]

Question

Add or subtract the date with buttons in javascript [duplicated]

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm trying to make a kind of daily agenda that can change the day. It turns out that clicking on the > or < instead of subtracting or adding a day to the current date (in days) takes it out in the part of the year. For example, today is 7, I would like that when I give < I get 6 in the day, but instead I get it in the part of the year. I would appreciate help from you, thanks in advance.

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>

javascript html css

asked by Joume Parra 07.06.2018 в 18:46

source

2 answers

0

I suggest that you fill this function that you personally believe and occupy where you spend as a date and the number of days you need to add, where you will return a final date.

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

To pass the first parameter, simply use a new Date(); or create a var containing the current date and pass it to function .

Call:

var date = new Date();

sumDias(date, 10);

in the return you should have the date 06-17-2018

answered by 07.06.2018 в 19:02

how to store the result of a query in csv format, with java? pass a variable from one php file to another

score 1 · Accepted Answer

Your code is complicated. I would do it much simpler using some plugin, but here is a solution using your code. Again, because of the restrictions that you created, this code only works for you in the current month, but adding more logic, you can make it work for the change of the month.

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>