How can I get the first and last day of a specific week in Javascript

Question:

I would like to know how I can get the first and last day of a specific week in Javascript.

For example, if I have week 14 of the year 2016, obtain that the first day is April 4 (Monday) and the last day is April 10 (Sunday).

The only thing I have found has been taking as Date the current system date, but not a specific week.

Answer:

I am going to leave two methods to do calculations without the need for external libraries, only with JavaScript. Each method will return different values.

Method 1: calendar week

This method assumes that the first week of the year begins on the first day of the year, no matter what day it is.

  • Create a function to which you pass year Y and week X
  • In that function, create a date with the first day of year Y (January 1, Y)
  • Add 7 * (number of weeks – 1) days to date
  • The date obtained will be the first day of week X of year Y
  • Add 6 days and you have the last day of week X of year Y

Here is a demo (I simplify the calculation of the first and last days of the week a bit):

 var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]; var dias = ["Domingo","Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"]; function calculaSemana() { // obtenemos los valores de año y semana (asumimos que son valores válidos) var year = document.getElementById("year").value; var week = document.getElementById("week").value; // añadimos validación a la semana if (week < 1 || week > 53) { alert("Error: la semana debe ser un número entre 1 y 53"); return false; } // obtenemos el primer y último día de la semana del año indicado var primer = new Date(year, 0, (week - 1) * 7 + 1); var ultimo = new Date(year, 0, (week - 1) * 7 + 7); // mostramos el resultado document.getElementById("resultado").innerHTML = "El primer día de la " + week + "<sup>a</sup> semana de " + year + " es " + primer.getDate() + " de " + meses[primer.getMonth()] + " (" + dias[primer.getDay()] + ")<br/>" + "El último día de la " + week + "<sup>a</sup> semana de " + year + " es " + ultimo.getDate() + " de " + meses[ultimo.getMonth()] + " (" + dias[ultimo.getDay()] + ")"; }
 <input type="year" id="year" placeholder="Año" /> <input type="number" id="week" placeholder="Semana" min="1" max="53" /> <input type="button" onclick="calculaSemana()" value="Calcular" /> <div id="resultado"></div>

Method 2: ISO week

This method assumes that the first week of the year begins on the first Monday of the year (which can leave some days orphaned of the week).

The idea is similar to the previous method, the only difference is that first we calculate which day of the week is the first day of the year, and from there we adjust so that the calculated date always coincides with Monday.

Here is a demo:

 var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]; var dias = ["Domingo","Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"]; function calculaSemana() { // obtenemos los valores de año y semana (asumimos que son valores válidos) var year = document.getElementById("year").value; var week = document.getElementById("week").value; // obtenemos el primer dia del año var primerdia = new Date(year, 0, 1); // obtenemos la corrección necesaria var correccion = 6 - primerdia.getDay(); // validación para la semana if (week * 7 + correccion > 365) { alert("El valor para semana no es válido"); return false; } // obtenemos el lunes y domingo de la semana especificada var primer = new Date(year, 0, (week - 1) * 7 + 3 + correccion); var ultimo = new Date(year, 0, (week - 1) * 7 + 9 + correccion); // mostramos el resultado document.getElementById("resultado").innerHTML = "El primer día de la " + week + "<sup>a</sup> semana de " + year + " es " + primer.getDate() + " de " + meses[primer.getMonth()] + " (" + dias[primer.getDay()] + ")<br/>" + "El último día de la " + week + "<sup>a</sup> semana de " + year + " es " + ultimo.getDate() + " de " + meses[ultimo.getMonth()] + " (" + dias[ultimo.getDay()] + ")"; }
 <input type="year" id="year" placeholder="Año" /> <input type="number" id="week" placeholder="Semana" min="1" max="53" /> <input type="button" onclick="calculaSemana()" value="Calcular" /> <div id="resultado"></div>
Scroll to Top