Cómo obtener la semana actual en Javascript

Actualmente estoy trabajando en mi proyecto final para mi bootcamp de codificación: ¡un Rastreador de hábitos! Y en este rastreador de hábitos, el usuario podrá hacer clic en una fecha de la semana actual para marcar el hábito como "hecho".

Entonces, ¿cómo obtengo las fechas de la semana actual? Digamos que es sábado y el usuario debe ver las fechas de lunes a domingo.

En un raro momento optimista, busqué en Google el "método de la semana actual de JavaScript", con la esperanza de encontrar algo como "date.currentWeek ()".

Fallar.

Parecía que tenía que escribir una función Javascript desde cero. Encontré un buen hilo de StackOverflow que me ayudó a encontrar una solución. Y en el camino, aprendí algunos métodos geniales de fecha de Javascript incorporados.

Esto me lleva a un punto. ¿Con qué frecuencia he oído desde que comencé este bootcamp: "No es necesario reinventar la rueda". Hay una multitud de problemas que la gente ya ha resuelto. No vale la pena pasar horas hurgando en su cerebro para encontrar su propia solución y "resolver" este problema. Excepto que está viendo un gran beneficio para su curva de aprendizaje en esta área en particular. Aparte de eso: solo google. Solo stackoverflow.

Aquí vamos. Hoy es sábado. Mi objetivo es crear una serie de todas las fechas de esta semana actual, de lunes a domingo.

Lo que tenemos que hacer es obtener el día del mes, averiguar el día de la semana (martes, miércoles, etc.), restar el número necesario para llegar al lunes y luego crear la nueva fecha usando el nuevo día calculado y combinarlo con el mes actual. Vamos a hacer uso de los métodos integrados de Javascript: nueva fecha, getDate, getDay y setDate. ¿Lo tengo?

Parece salvaje, pero tendrá más sentido cuando revisemos el código.

Línea 1 "nueva fecha"

=> Esto nos da la fecha de hoy, es decir, "Sáb 12 de agosto de 2017 15:22:48 GMT-0400 (EDT)"

Línea 5 "getDate ()"

=> Devuelve el día del mes, en este caso "12"

Línea 5 "getDay ()" => ¡Aquí es donde sucede la magia!

=> Devuelve el día de la semana.

=> El valor de retorno es un entero, donde domingo = 0, lunes = 1, martes = 2, etc.

=> En nuestro caso, devuelve 6 para el sábado

=> Esto nos permite restar este valor de retorno del día del mes de hoy para que obtengamos el día del mes del lunes. Para llegar al lunes restaremos 6 + 1. Necesitamos el +1 o de lo contrario aterrizaríamos el domingo.

=> 12–6 + 1 = 7

=> 7 de agosto es un lunes

=> BAM!

Entonces solo es cuestión de hacer un bucle para cada día de la semana e insertar cada fecha en la matriz de mi semana. Pero también necesitamos reconstruir nuestra fecha.

Línea 6 "setDate ()"

=> establece el día del objeto Fecha relativo al comienzo del mes establecido actualmente

=> Necesitamos este método para construir nuestra fecha real. Hasta ahora, primero es "7" y tenemos que combinarlo con el mes actual para llegar al 7 de agosto.

=> El valor de retorno es algo extraño como esto: 1502134686498. En caso de que se lo pregunte. Este es el número de milisegundos entre el 1 de enero de 1970 00:00:00 UTC y la fecha dada.

=> Es por eso que necesitamos envolver esto en "nueva Fecha", para llegar a nuestro formato de fecha deseado

=> nueva Fecha (1502134686498) devuelve "Lun Ago 07 2017 15:38:06 GMT-0400 (EDT)"

He utilizado algunos formatos adicionales debido a las necesidades de mi aplicación.

Línea 6 "toISOString ()"

=> devuelve "2017–08–07T19: 38: 06.498Z"

=> Y como solo necesitaba la fecha sin tiempo, corté mi cadena en consecuencia.

Y aquí vamos, ¡mi último conjunto de "semanas" está listo!

=> [“2017–08–07”, “2017–08–08”, “2017–08–09”, “2017–08–10”, “2017–08–11”, “2017–08–12” , “2017–08–13”]

¡Uf, eso fue un pequeño desafío para la mente! Para mi aplicación, no terminó allí. Como necesito comparar las cadenas de fecha de Javascript con mis objetos Ruby en mi base de datos Rails, necesitaba agregar más conversiones. Pero este es un tema para una publicación de blog separada ...