Maison > Tutoriel CMS > WordPresse > le corps du texte

JavaScript Vanilla : ajouter ou soustraire des jours à la date (et plus)

PHPz
Libérer: 2023-08-26 16:53:08
original
935 Les gens l'ont consulté

Vanilla JavaScript:从日期中添加或减去天数(以及更多)

Dans un tutoriel récent, nous avons appris comment obtenir et définir les valeurs du mois, du jour, de l'année et de l'heure de n'importe quel Date objet. La possibilité d'obtenir et de définir ces valeurs de date s'avère utile dans de nombreuses situations. Par exemple, vous pouvez stocker la date d'un événement spécial dans une variable. Vous pouvez également utiliser ces méthodes pour afficher la date et l'heure actuelles ou pour ajouter ou soustraire une période de temps.

Dans ce didacticiel, nous nous concentrerons sur l'apprentissage de la façon d'ajouter ou de soustraire une période de temps, telle que l'année, le mois, le jour, les heures et les minutes, à partir d'une date spécifiée.

Comment ajouter l'année, le mois et le jour à ce jour

Vous vous souvenez peut-être de nos autres tutoriels que JavaScript dispose de setFullYear()getFullYear() 等方法,您可以使用它们来设置和获取特定日期的当前全年。您可以使用 setMonth()getMonth() 等方法来设置和获取特定日期的当前月份。同样,您可以使用 setDate()getDate() méthodes pour définir et obtenir le jour du mois.

Écrivons une fonction qui ajoute une année à une date. Il acceptera la date et l’année que vous souhaitez ajouter comme paramètres et renverra la nouvelle date.

function addYearsToDate(date, years) {
   let new_date = new Date(date);
   new_date.setFullYear(new_date.getFullYear() + years);

   return new_date;
}

let today = new Date();
let five_years_later = addYearsToDate(today, 5);

// Outputs: Date Wed Jun 07 2023 19:04:56 GMT+0530 (India Standard Time)
console.log(today);

// Outputs: Date Wed Jun 07 2028 19:04:56 GMT+0530 (India Standard Time)
console.log(five_years_later);
Copier après la connexion

La chose importante à noter ici est que l'utilisation du constructeur Date() crée un nouvel objet Date() 构造函数创建一个新的 Date 对象,该对象被分配给变量 new_date。只需将 new_date 的值设置为给定的 date 就会导致它们都指向同一个 Date qui est affecté à la variable new_date. En définissant simplement la valeur de new_date sur la date donnée, ils pointeront tous les deux vers le même

objet.

addMonthsToDate()Nous utiliserons la même logique pour créer la fonction

qui accepte une date et le nombre de mois à ajouter en paramètres et renvoie la nouvelle date.

 function addMonthsToDate(date, months) {
   let new_date = new Date(date);
   new_date.setMonth(new_date.getMonth() + months);

   return new_date;
}

let today = new Date();
let five_months_later = addMonthsToDate(today, 5);
let fifty_months_later = addMonthsToDate(today, 50);

// Outputs: Date Wed Jun 07 2023 19:15:04 GMT+0530 (India Standard Time)
console.log(today);

// Outputs: Date Tue Nov 07 2023 19:15:04 GMT+0530 (India Standard Time)
console.log(five_months_later);

// Outputs: Date Sat Aug 07 2027 19:15:04 GMT+0530 (India Standard Time)
console.log(fifty_months_later); 
Copier après la connexion
setMonth()Comme je l'ai mentionné dans d'autres tutoriels, tout débordement rencontré par la méthode

entraînera l'ajout du nombre d'années approprié à la date donnée. C'est ce qui arrive lorsque l'on ajoute 50 mois à la date. Cela a ajouté 4 ans et 2 mois à notre date de rencontre.

Maintenant, écrivons une fonction qui ajoute le nombre de jours donné à notre date spécifiée et renvoie une nouvelle date :

function addDaysToDate(date, days) {
   let new_date = new Date(date);
   new_date.setDate(new_date.getDate() + days);

   return new_date;
}

let today = new Date();
let five_days_later = addDaysToDate(today, 5);
let thousand_days_later = addDaysToDate(today, 1000);

// Outputs: Date Wed Jun 07 2023 19:29:12 GMT+0530 (India Standard Time)
console.log(today);

// Outputs: Date Wed Jun 07 2023 19:29:12 GMT+0530 (India Standard Time)
console.log(five_days_later);

// Outputs: Date Wed Jun 07 2023 19:29:12 GMT+0530 (India Standard Time)
console.log(thousand_days_later);
Copier après la connexion

Ajoutez n'importe quelle période à nos dates

Nous avons défini trois nouvelles fonctions qui nous permettent d'ajouter une année, un mois ou un jour à une date donnée en JavaScript. Vous souhaiterez peut-être ajouter une autre période ou durée à la date, telle que des heures, des minutes ou des secondes. Cela ne sert à rien d’écrire trois fonctions supplémentaires pour eux.

Les fonctions suivantes peuvent être utilisées pour ajouter n'importe quelle période à une date spécifiée :

function addPeriodToDate(date, {years = 0, months = 0, days = 0, hours = 0, minutes = 0, seconds = 0}) {
   let new_date = new Date(date);
   
   new_date.setFullYear(new_date.getFullYear() + years);
   new_date.setMonth(new_date.getMonth() + months);
   new_date.setDate(new_date.getDate() + days);
   new_date.setHours(new_date.getHours() + hours);
   new_date.setMinutes(new_date.getMinutes() + minutes);
   new_date.setSeconds(new_date.getSeconds() + seconds);

   return new_date;
}


let today = new Date();
// Outputs: Date Wed Jun 07 2023 20:18:24 GMT+0530 (India Standard Time)
console.log(today);

let period = {years: 1, months: 2, days: 3};
let new_date = addPeriodToDate(today, period);
// Outputs: Date Sat Aug 10 2024 20:18:24 GMT+0530 (India Standard Time)
console.log(new_date);

period = {years: 4, months: 22};
new_date = addPeriodToDate(today, period);
// Outputs: Date Sat Apr 07 2029 20:18:24 GMT+0530 (India Standard Time)
console.log(new_date);

period = {days: 4, seconds: 22};
new_date = addPeriodToDate(today, period);
// Outputs: Date Sun Jun 11 2023 20:18:46 GMT+0530 (India Standard Time)
console.log(new_date);
Copier après la connexion

Comme vous pouvez le voir, la fonction ci-dessus gère pour vous tout problème de débordement. Il n'est pas non plus nécessaire de fournir des valeurs pour toutes les unités de temps puisqu'elles sont définies sur 0 par défaut. Cela signifie que nous pouvons simplement transmettre le nombre de jours et de secondes que nous souhaitons ajouter tout en ignorant toutes les autres valeurs.

Soustrayez toute période de temps de notre date

Nous n’avons pas besoin d’écrire une fonction distincte pour soustraire une période arbitraire d’une date. Vous pouvez utiliser les fonctions de la section précédente pour soustraire des années, des mois, des jours, des heures, des minutes ou des secondes. Tout ce que vous avez à faire est de fournir une valeur négative pour cette période. Voici quelques exemples :

period = {years: -1, months: -2, days: -3};
new_date = addPeriodToDate(today, period);

// Outputs: Date Mon Apr 04 2022 20:18:24 GMT+0530 (India Standard Time)
console.log(new_date);

period = {years: -4, months: -22};
new_date = addPeriodToDate(today, period);

// Outputs: Date Mon Aug 07 2017 20:18:24 GMT+0530 (India Standard Time)
console.log(new_date);

period = {days: -4, seconds: -22};
new_date = addPeriodToDate(today, period);

// Outputs: Date Sat Jun 03 2023 20:18:02 GMT+0530 (India Standard Time)
console.log(new_date); 
Copier après la connexion
Pensées finales

addYearsToDate() 这样的函数,专门简单地执行此操作。另一种方法是创建一个更通用的 addPeriodToDate()Dans ce tutoriel, nous avons appris deux manières différentes de résoudre le problème de l'ajout et de la soustraction d'années, de mois, de jours, etc. aux dates en JavaScript. Si vous souhaitez simplement ajouter ou soustraire des années, vous pouvez envisager de créer une fonction comme

qui peut gérer différentes unités de temps. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!