Comment obtenir la semaine en cours en Javascript

Je travaille actuellement sur mon projet final pour mon bootcamp de codage - un suiveur d'habitudes! Et dans ce suivi des habitudes, l'utilisateur pourra cliquer sur une date de la semaine en cours pour marquer l'habitude comme étant "terminée".

Alors - Comment puis-je obtenir les dates de la semaine en cours? Disons que c’est samedi et que l’utilisateur doit voir les dates du lundi au dimanche.

Dans un rare moment optimiste, j’ai cherché dans Google la «méthode javascript de la semaine en cours», espérant trouver quelque chose comme «date.currentWeek ()».

Échouer.

Il semblait que je devais écrire une fonction Javascript à partir de zéro. J'ai trouvé un bon fil StackOverflow qui m'a aidé à trouver une solution. Et en cours de route, j'ai appris quelques méthodes de datation Javascript très sophistiquées.

Cela m'amène à un point. Combien de fois ai-je entendu depuis que j'ai commencé ce bootcamp: «Tu n'as pas à réinventer la roue». Il existe une multitude de problèmes que les gens ont déjà résolus. Cela ne vaut pas la peine de passer des heures à vous casser la tête pour trouver votre propre solution et «survoler» ce problème. Sauf que vous voyez de grands avantages pour votre courbe d'apprentissage dans ce domaine particulier. Autre que cela: juste Google. Juste stackoverflow.

Et c'est parti. Aujourd'hui c'est samedi. Mon objectif est de créer un tableau de toutes les dates de cette semaine, du lundi au dimanche.

Ce que nous devons faire est d’obtenir le jour du mois, de connaître le jour de la semaine (mardi, mercredi, etc.), de soustraire le nombre nécessaire pour se rendre à lundi, puis de créer la nouvelle date à l’aide du nouveau jour calculé et de la combiner avec le mois en cours. Nous allons utiliser les méthodes intégrées de Javascript: new Date, getDate, getDay et setDate. Je l'ai?

Cela semble sauvage, mais cela aura plus de sens lorsque nous allons parcourir le code.

Ligne 1 “nouvelle date”

=> Ceci nous donne la date du jour, c’est-à-dire «Sam 12 août 2017 15h22:48 GMT-0400 (EDT)»

Ligne 5 “getDate ()”

=> Retourne le jour du mois, dans ce cas «12»

Ligne 5 “getDay ()” => C’est là que la magie opère!

=> Retourne le jour de la semaine.

=> La valeur de retour est un entier, où dimanche = 0, lundi = 1, mardi = 2, etc.!

=> Dans notre cas, il retourne 6 pour samedi

=> Ceci nous permet de soustraire cette valeur de retour du jour du mois d’aujourd’hui afin d’obtenir le lundi du mois. Pour arriver à lundi, nous soustrayons 6 + 1. Nous avons besoin du +1 ou nous atterririons le dimanche.

=> 12–6 + 1 = 7

=> Le 7 août est un lundi

=> BAM!

Ensuite, il ne reste plus qu’à boucler pour chaque jour de la semaine et à insérer chaque date dans le tableau de ma semaine. Mais nous devons aussi reconstruire notre date.

Ligne 6 "setDate ()"

=> définit le jour de l'objet Date par rapport au début du mois actuellement défini

=> Nous avons besoin de cette méthode pour construire notre date réelle. Jusqu'ici, le premier est «7» et nous devons le combiner avec le mois en cours pour arriver au 7 août.

=> La valeur de retour est quelque chose de bizarre comme ceci: 1502134686498. Au cas où vous vous poseriez la question. Il s'agit du nombre de millisecondes entre le 1er janvier 1970 00:00:00 UTC et la date donnée.

=> C’est la raison pour laquelle nous devons envelopper la nouvelle date pour obtenir le format de date souhaité

=> new Date (1502134686498) retourne «lun 07 août 2017 15:38:06 GMT-0400 (EDT)»

J’ai utilisé un formatage supplémentaire en raison des besoins de mon application.

Ligne 6 "toISOString ()"

=> renvoie «2017–08–07T19: 38: 06.498Z»

=> Et comme je n'avais besoin que de la date sans heure, j'ai coupé ma ficelle en conséquence.

Et voilà, mon tableau final "semaine" est terminé!

=> [«2017-08-08», «2017-08-08», «2017-08-09», «2017-08-10», «2017-08-08», «2017-08-12» , «2017-08-13»]

Ouf, c'était un joli petit casse-tête! Pour mon application, cela ne s'est pas arrêté là. Comme je dois comparer les chaînes de date Javascript avec mes objets Ruby dans ma base de données Rails, j'ai dû ajouter plus de conversions. Mais ceci est un sujet pour un article de blog séparé…