I Shar

I Shar

мир глазами веб-разработчика

Создаем календарные массивы

Как сгенерировать массивы дней, месяцев и лет с помощью JavaScript

время чтения 2 мин.

Photo by Nick Hillier on Unsplash

Всегда существуют два способа решения поставленной задачи: простой и сложной. Я отношусь к категории людей, которые предпочитают максимально легкий способ достижения цели. Для меня, как для разработчика это означает следующее: чем меньше кода, тем проще решение.

Если Вы ранее не встречались с библиотекой moment.js, уделите немного времени изучению документации на официальном сайте. В случае, если у Вас возникнет желание попрактиковаться, установите или импортируйте эту библиотеку в свое рабочее пространство.

Сегодня мы познакомимся с двумя весьма полезными функциями moment.js: .add() и .diff().


.add()

moment().add(Number, String);
moment().add(Duration);
moment().add(Object);

Параметры для этой функции могут иметь одно из трех значений.

number и string

Число (number) определяет количество юнитов, а строка (string) - их тип.

duration

В качестве параметра принимает объект (Moment-Duration).

object

Объект в формате {‘unit’:number}. Таким образом можно определить несколько различных юнитов.

Пример использования.

moment().add(7, 'days');
moment().add({ days:7, months:1 });
Const duration = moment.duration({'days' : 1});
moment().add(duration);


.diff()

moment().diff(Moment|String|Number|Date|Array);
moment().diff(Moment|String|Number|Date|Array, String);
moment().diff(Moment|String|Number|Date|Array, String, Boolean);

Эта функция принимает три параметра, два из которых являются опциональными.

Первый параметр

Может быть Moment, String, Number, Date, Array.

Второй параметр

Строковое значение, необходимое для сравнения.

Третий параметр

Указывается, если для возвращаемого значения необходимо использовать плавающую запятую (в противном случае происходит округление до ближайшего целого числа).

Пример использования.

Const a = moment().add(2, 'year');
Const b = moment();
a.diff(b, 'years'); // возвращает 2
Const a = moment();
Const b = moment().add(1, 'seconds');
a.diff(b) // -1000
b.diff(a) // 1000

Календарные массивы

Создадим массив лет

const YEARS = () => {
    const years = []
    const dateStart = moment()
    const dateEnd = moment().add(10, 'y')
    while (dateEnd.diff(dateStart, 'years') >= 0) {
        years.push(dateStart.format('YYYY'))
        dateStart.add(1, 'year')
    }
    return years
}
console.log(YEARS())

Создадим массив месяцев

const MONTHS = () => {
    const months = []
    const dateStart = moment()
    const dateEnd = moment().add(12, 'month')
    while (dateEnd.diff(dateStart, 'months') >= 0) {
        years.push(dateStart.format('M'))
        dateStart.add(1, 'month')
    }
    return months
}
console.log(MONTHS())

Создадим массив дней

const DAYS = () => {
    const days = []
    const dateStart = moment()
    const dateEnd = moment().add(30, 'days')
    while (dateEnd.diff(dateStart, 'days') >= 0) {
        years.push(dateStart.format('D'))
        dateStart.add(1, 'days')
    }
    return days
}
console.log(DAYS())


Спасибо за внимание.

    • frontend
    • js

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.