Comment obtenir 7 jours dans une semaine avec date en utilisant JavaScript

Posté Par: Windows2022tutosur: décembre 12, 2022Dans: TechPas De Commentaires

Comment obtenir 7 jours dans une semaine avec date en utilisant JavaScript

Introduction

Dans ce tutoriel, nous allons créer un Comment obtenir 7 jours dans une semaine avec date en utilisant JavaScript. L’objectif de ce didacticiel est d’aider à afficher les données de 7 jours par semaine. Cela couvrira toutes les fonctions de base qui fournissent le calcul de l’entrée de date. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.

Ce tutoriel est simple et facile à comprendre, il suffit de suivre les instructions que j’ai fournies et vous pouvez le faire sans problème. Ce programme peut être utilisé sur tout type de système qui doit afficher les jours de la semaine. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme 7 jours dans une semaine avec date. Faisons donc le codage.

Avant de commencer :

Ceci est le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.

Création de l’interface

C’est ici que nous allons créer une interface simple pour notre application. Ce code affichera un sélecteur de date de formulaire et un bouton. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.

<!DOCTYPE html>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Get 7 Days in a Week With Date using JavaScript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
					<input type="date" id="date" class="form-control"/>
					<button type="button" onclick="GetWeek();" class="btn btn-primary btn-block"><span class="glyphicon glyphicon-save"></span> Submit</button>

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code vous permettra d’ajouter dynamiquement des notes et de l’afficher. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

function CalculateDayOfWeek(date){
    var days = new Array();
    for (var i = ; i < 7; i++){

  


        days[i] = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1 + i);
    }
 
    return days;
}
 
function GetWeek(){
	var date = document.getElementById('date');
	if(date.value == ""){
		alert("Please enter a date first!");
	}else{
		var months= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
		var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
		var newDate = new Date(date.value);
		var dates = new Array();
		dates = CalculateDayOfWeek(newDate);
		var data ="<h2>7 days of a week data</h2>";
		for(var i=; i < dates.length; i++){
			data += "<p class="text-danger">"+days[dates[i].getDay()]+": "+months[dates[i].getMonth()]+" "+dates[i].getDate()+", "+dates[i].getFullYear()+"</p>";
		}
 
		document.getElementById('result').innerHTML = data;
	}
}

Dans la première ligne de code, nous allons créer une méthode appelée CalculerJourDeSemaine(). Cette méthode renverra uniquement la valeur de date en ajoutant chaque index de date dans une longueur de 7. Ensuite, nous allons créer une autre méthode appelée GetWeek(), le but de cette méthode est de récupérer les index de date et d’ajouter la valeur de la chaîne de date. Afin d’afficher les 7 jours, nous devons utiliser la fonction de boucle for pour afficher les index avec la valeur de date en conséquence dans votre élément html.

Production:

La Comment obtenir 7 jours dans une semaine avec date en utilisant JavaScript le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.

Voilà, nous avons créé avec succès Comment obtenir 7 jours dans une semaine avec date en utilisant JavaScript. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !

Plus de tutoriels pour le langage JavaScript

Tutoriels JavaScript

Télécharger ici