Вам, вероятно, не нужен Moment.js

Moment.js — отличная библиотека времени и даты со множеством замечательных методов, обычноnpm installПосле этого все сухо, но если ваше веб-приложение предъявляет высокие требования к производительности, это может привести к огромным потерям производительности из-за сложного API и размера.

Некоторые проблемы с Moment

• Он в значительной степени основан на OOP API, что делает невозможным использование недавно представленного Webpack 2.Tree-shakingТехнология оптимизации кода
• Так как ООП API также имеет нечистые функции, это может привести к некоторым ошибкам.GitHub.com/момент/что…
• Если вы не используете часовые пояса, а используете только некоторые простые функции в moment.js, это приведет к тому, что ваше приложение будет представлено множеством неиспользуемых методов, что чрезвычайно расточительно для производительности и памяти. Рекомендуется здесьdayjs, dayjsИмеет меньшее ядро ​​и очень похожий API, поэтому плавно переходить от moment к day.js. date-fns может использоватьTree-shakingМетоды оптимизации кода и другие хорошие API, поэтому он хорошо работает с такими хорошими друзьями, как React, Sinon.js и webpack.

простое сравнение

имя	размер (gzip)	Поддержка Tree-shaking	слава	количество API-методов	модель	поддержка часового пояса	Количество поддерживаемых языков
Moment.js	329K(69.6K)	No	38k	высоко	OO	очень хорошо (момент-часовой пояс)	123
date-fns	78.4k(13.4k) without tree-shaking	Yes	13k	высоко	Functional	еще не поддерживается	32
dayjs	6.5k(2.6k) without plugins	No	14k	середина	OO	еще не поддерживается	23

Программист Тукао

Момент.js заменен на date-fns — на 40% меньше выходных данных при сборке.

—Jared Farago from webnode project.

Пожалуйста, используйте собственные объекты времени и массивы JavaScript. Если вы по какой-то причине хотите использовать Moment.js, это отличная библиотека. почти.

—Dan Abramov, Author of Redux and co-author of Create React App. Building tools for humans.

Я настоятельно рекомендую использовать date-fns вместо Moment.js, у него лучший API, и вы можете включать только те части, которые вам нужны!

—Матия Марохнич, опытный разработчик интерфейса из Хорватии.

Буквально вчера мы заменили momentjs в проекте, и объем нашего проекта сильно сократился 😱

—Сергей Петушков, разработчик JavaScript из Москвы, Россия • Сейчас в Берлине, Германия.

Плагин ESLint

если вы используетеESLint, вы можете установить плагинpluginчтобы помочь вам определить места в вашей кодовой базе, где у вас нет (и, вероятно, не нужен) Moment.js.

Установите этот плагин...

npm install --save-dev eslint-plugin-you-dont-need-momentjs

... затем обновите конфигурацию

"extends" : ["plugin:you-dont-need-momentjs/recommended"],

использовать контраст

⚠️_Обратите внимание, что приведенный пример date-fns предназначен для [v2](Dart-Funiushan.org/V2.0.0-AL рН…[см. документацию v1](Dart-Funiushan.org/docs/get tin…

Разобрать

Строка + форматирование даты

Возвращает дату, проанализированную из строки.

// Moment.js
moment('12-25-1995', 'MM-DD-YYYY');
// => "1995-12-24T13:00:00.000Z"

// date-fns
import parse from 'date-fns/parse';
parse('12-25-1995', 'MM-dd-yyyy', new Date());
// => "1995-12-24T13:00:00.000Z"

// dayjs
dayjs('12-25-1995');
// => "1995-12-24T13:00:00.000Z"

Строка + форматирование времени

Возвращает дату времени, проанализированную из строки.

// Moment.js
moment('2010-10-20 4:30', 'YYYY-MM-DD HH:mm');
// => "2010-10-19T17:30:00.000Z"

// date-fns
import parse from 'date-fns/parse';
parse('2010-10-20 4:30', 'yyyy-MM-dd H:mm', new Date());
// => "2010-10-19T17:30:00.000Z"

// dayjs❌不支持自定义格式解析

Строка + локальное форматирование

Возвращает локализованную дату времени, проанализированную из строки.

// Moment.js
moment('2012 mars', 'YYYY MMM', 'fr');
// => "2012-02-29T13:00:00.000Z"

// date-fns
import parse from 'date-fns/parse';
import fr from 'date-fns/locale/fr';
parse('2012 mars', 'yyyy MMMM', new Date(), { locale: fr });
// => "2012-02-29T13:00:00.000Z"

// dayjs❌不支持自定义格式解析

получить значение + присвоить

миллисекунды/секунды/минуты/часы

Получать毫秒 / 秒 / 分 / 时.

// Moment.js
moment().seconds();
// => 49
moment().hours();
// => 19

// 原生
new Date().getSeconds();
// => 49
new Date().getHours();
// => 19

// date-fns
import getSeconds from 'date-fns/getSeconds';
import getHours from 'date-fns/getHours';
getSeconds(new Date());
// => 49
getHours(new Date());
// => 19

// dayjs
dayjs().second();
// => 49
dayjs().hour();
// => 19

настраивать毫秒 / 秒 / 分 / 时.

// Moment.js
moment().seconds(30);
// => "2018-09-09T09:12:30.695Z"
moment().hours(13);
// => "2018-09-09T03:12:49.695Z"

// 原生
new Date(new Date().setSeconds(30));
// => "2018-09-09T09:12:30.695Z"
new Date(new Date().setHours(13));
// => "2018-09-09T03:12:49.695Z"

// date-fns
import setSeconds from 'date-fns/setSeconds';
import setHours from 'date-fns/setHours';
setSeconds(new Date(), 30);
// => "2018-09-09T09:12:30.695Z"
setHours(new Date(), 13);
// => "2018-09-09T03:12:49.695Z"

// dayjs
dayjs().set('second', 30);
// => "2018-09-09T09:12:30.695Z"
dayjs().set('hour', 13);
// => "2018-09-09T03:12:49.695Z"

день месяца

Установите и получите месяц.

// Moment.js
moment().date();
// => 9
moment().date(4);
// => "2018-09-04T09:12:49.695Z"

// 原生
new Date().getDate();
// => 9
new Date().setDate(4);
// => "2018-09-04T09:12:49.695Z"

// date-fns
import getDate from 'date-fns/getDate';
import setDate from 'date-fns/setDate';
getDate(new Date());
// => 9
setDate(new Date(), 4);
// => "2018-09-04T09:12:49.695Z"

// dayjs
dayjs().date();
// => 9
dayjs().set('date', 4);
// => "2018-09-04T09:12:49.6

День недели

Установите и получите неделю недели.

// Moment.js
moment().day();
// => 0 (Sunday)
moment().day(-14);
// => "2018-08-26T09:12:49.695Z"

// 原生
new Date().getDay();
// => 0 (Sunday)
new Date().setDate(new Date().getDate() - 14);
// => "2018-08-26T09:12:49.695Z"

// date-fns
import getDay from 'date-fns/getDay';
import setDay from 'date-fns/setDay';
getDay(new Date());
// => 0 (Sunday)
setDay(new Date(), -14);
// => "2018-08-26T09:12:49.695Z"

// dayjs
dayjs().day();
// => 0 (Sunday)
dayjs().set('day', -14);
// => "2018-08-26T09:12:49.695Z"

день года

Установить и получить день года.

// Moment.js
moment().dayOfYear();
// => 252
moment().dayOfYear(256);
// => "2018-09-13T09:12:49.695Z"

// date-fns
import getDayOfYear from 'date-fns/getDayOfYear';
import setDayOfYear from 'date-fns/setDayOfYear';
getDayOfYear(new Date());
// => 252
setDayOfYear(new Date(), 256);
// => "2018-09-13T09:12:49.695Z"

// dayjs ❌  不支持

неделя года

Установите и получите неделю года.

// Moment.js
moment().week();
// => 37
moment().week(24);
// => "2018-06-10T09:12:49.695Z"

// date-fns
import getWeek from 'date-fns/getWeek';
import setWeek from 'date-fns/setWeek';
getWeek(new Date());
// => 37
setWeek(new Date(), 24);
// => "2018-06-10T09:12:49.695Z"

// dayjs ⚠️ requires weekOfYear plugin
import weekOfYear from 'dayjs/plugin/weekOfYear';
dayjs.extend(weekOfYear);
dayjs().week();
// => 37
// dayjs ❌  不支持

сколько дней в месяце

Узнайте, сколько дней в месяце.

// Moment.js
moment('2012-02', 'YYYY-MM').daysInMonth();
// => 29

// date-fns
import getDaysInMonth from 'date-fns/getDaysInMonth';
getDaysInMonth(new Date(2012, 1));
// => 29

// dayjs
dayjs('2012-02').daysInMonth();
// => 29

сколько недель в году

Получает номер недели для текущего года на основе недели ISO.

// Moment.js
moment().isoWeeksInYear();
// => 52

// date-fns
import getISOWeeksInYear from 'date-fns/getISOWeeksInYear';
getISOWeeksInYear(new Date());
// => 52

// dayjs ❌ does not support weeks in the year

получить максимальную дату

Возвращает максимальное значение для данной даты.

const array = [
  new Date(2017, 4, 13),
  new Date(2018, 2, 12),
  new Date(2016, 0, 10),
  new Date(2016, 0, 9),
];
// Moment.js
moment.max(array.map(a => moment(a)));
// => "2018-03-11T13:00:00.000Z"

// 原生
new Date(Math.max.apply(null, array)).toISOString();
// => "2018-03-11T13:00:00.000Z"

// date-fns
import max from 'date-fns/max';
max(array);
// => "2018-03-11T13:00:00.000Z"

// dayjs ❌  不支持

Получить дату минимум

Возвращает минимальное значение для заданной даты.

const array = [
  new Date(2017, 4, 13),
  new Date(2018, 2, 12),
  new Date(2016, 0, 10),
  new Date(2016, 0, 9),
];
// Moment.js
moment.min(array.map(a => moment(a)));
// => "2016-01-08T13:00:00.000Z"

// 原生
new Date(Math.min.apply(null, array)).toISOString();
// => "2016-01-08T13:00:00.000Z"

// date-fns
import min from 'date-fns/min';
min(array);
// => "2016-01-08T13:00:00.000Z"

// dayjs ❌  不支持

сравнение операций

добавить дни

Добавляет указанное количество дней к заданной дате.

// Moment.js
moment().add(7, 'days');
// => "2018-09-16T09:12:49.695Z"

// date-fns
import addDays from 'date-fns/addDays';
addDays(new Date(), 7);
// => "2018-09-16T09:12:49.695Z"

// dayjs
dayjs().add(7, 'day');
// => "2018-09-16T09:12:49.695Z"

минус дни

Вычитает указанное количество дней из заданной даты.

// Moment.js
moment().subtract(7, 'days');
// => "2018-09-02T09:12:49.695Z"

// date-fns
import subDays from 'date-fns/subDays';
subDays(new Date(), 7);
// => "2018-09-02T09:12:49.695Z"

// dayjs
dayjs().subtract(7, 'day');
// => "2018-09-02T09:12:49.695Z"

Первый раз

Получить время начала месяца.

// Moment.js
moment().startOf('month');
// => "2018-08-31T14:00:00.000Z"

// date-fns
import startOfMonth from 'date-fns/startOfMonth';
startOfMonth(new Date());
// => "2018-08-31T14:00:00.000Z"

// dayjs
dayjs().startOf('month');
// => "2018-08-31T14:00:00.000Z"

Получите время, которое заканчивается сегодня

Получите время, которое заканчивается сегодня.

// Moment.js
moment().endOf('day');
// => "2018-09-09T13:59:59.999Z"

// date-fns
import endOfDay from 'date-fns/endOfDay';
endOfDay(new Date());
// => "2018-09-09T13:59:59.999Z"

// dayjs
dayjs().endOf('day');
// => "2018-09-09T13:59:59.999Z"

показывать

формат

Форматирует заданную строку в заданном формате.

// Moment.js
moment().format('dddd, MMMM Do YYYY, h:mm:ss A');
// => "Sunday, September 9th 2018, 7:12:49 PM"
moment().format('ddd, hA');
// => "Sun, 7PM"

// date-fns
import format from 'date-fns/format';
format(new Date(), 'eeee, MMMM do YYYY, h:mm:ss aa');
// => "Sunday, September 9th 2018, 7:12:49 PM"
format(new Date(), 'eee, ha');
// => "Sun, 7PM"

// dayjs
dayjs().format('dddd, MMMM D YYYY, h:mm:ss A');
// => "Sunday, September 9 2018, 7:12:49 PM" ⚠️  not support 9th
dayjs().format('ddd, hA');
// => "Sun, 7PM"

Теперь, чтобы получить количество лет

Получить текущий возраст

// Moment.js
moment(1536484369695).fromNow();
// => "4 days ago"

// date-fns
import formatDistance from 'date-fns/formatDistance';
formatDistance(new Date(1536484369695), new Date(), { addSuffix: true });
// => "4 days ago"

// dayjs ⚠️ requires relativeTime plugin
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);

dayjs(1536484369695).fromNow();
// => "5 days ago" ⚠️  这个插件的舍入方法与moment.js和date-fns不同，请谨慎使用。

расстройство суточного биоритма в связи с дальним перелетом

Возвращает разницу во времени между двумя временными точками.

// Moment.js
moment([2007, 0, 27]).to(moment([2007, 0, 29]));
// => "in 2 days"

// date-fns
import formatDistance from 'date-fns/formatDistance';
formatDistance(new Date(2007, 0, 27), new Date(2007, 0, 29));
// => "2 days"

// dayjs ⚠️ 需要relativeTime插件
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
dayjs('2007-01-27').to(dayjs('2007-01-29'));
// => "in 2 days"

Разница во времени (мс)

Возвращает разницу во времени в миллисекундах между двумя моментами времени.

// Moment.js
moment([2007, 0, 27]).diff(moment([2007, 0, 29]));
// => -172800000
moment([2007, 0, 27]).diff(moment([2007, 0, 29]), 'days');
// => -2

// date-fns
import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
differenceInMilliseconds(new Date(2007, 0, 27), new Date(2007, 0, 29));
// => -172800000
import differenceInDays from 'date-fns/differenceInDays';
differenceInDays(new Date(2007, 0, 27), new Date(2007, 0, 29));
// => -2

// dayjs
dayjs('2007-01-27').diff(dayjs('2007-01-29'), 'milliseconds');
// => -172800000
dayjs('2007-01-27').diff(dayjs('2007-01-29'), 'days');
// => -2

Запрос

Будь то

Проверьте, не предшествует ли дата другой дате.

// Moment.js
moment('2010-10-20').isBefore('2010-10-21');
// => true

// date-fns
import isBefore from 'date-fns/isBefore';
isBefore(new Date(2010, 9, 20), new Date(2010, 9, 21));
// => true

// dayjs
dayjs('2010-10-20').isBefore('2010-10-21');
// => true

Это то же самое

Проверьте, совпадает ли дата с другой датой.

// Moment.js
moment('2010-10-20').isSame('2010-10-21');
// => false
moment('2010-10-20').isSame('2010-10-20');
// => true
moment('2010-10-20').isSame('2010-10-21', 'month');
// => true

// date-fns
import isSameDay from 'date-fns/isSameDay';
import isSameMonth from 'date-fns/isSameMonth';
isSameDay(new Date(2010, 9, 20), new Date(2010, 9, 21));
// => false
isSameDay(new Date(2010, 9, 20), new Date(2010, 9, 20));
// => true
isSameMonth(new Date(2010, 9, 20), new Date(2010, 9, 21));
// => true

// dayjs
dayjs('2010-10-20').isSame('2010-10-21');
// => false
dayjs('2010-10-20').isSame('2010-10-20');
// => true
// dayjs ❌  不支持

то ли после

Проверьте, не находится ли дата после другой даты.

// Moment.js
moment('2010-10-20').isAfter('2010-10-19');
// => true

// date-fns
import isAfter from 'date-fns/isAfter';
isAfter(new Date(2010, 9, 20), new Date(2010, 9, 19));
// => true

// dayjs
dayjs('2010-10-20').isAfter('2010-10-19');
// => true

Это до двух свиданий

Проверьте, находится ли дата между двумя другими датами.

// Moment.js
moment('2010-10-20').isBetween('2010-10-19', '2010-10-25');
// => true

// date-fns
import isWithinInterval from 'date-fns/isWithinInterval';
isWithinInterval(new Date(2010, 9, 20), {
  start: new Date(2010, 9, 19),
  end: new Date(2010, 9, 25),
});
// => true

// dayjs ⚠️ requires isBetween plugin
import isBetween from 'dayjs/plugin/isBetween';
dayjs.extend(isBetween);
dayjs('2010-10-20').isBetween('2010-10-19', '2010-10-25');
// => true

Это високосный год

Определите, является ли этот год пробегом.

// Moment.js
moment([2000]).isLeapYear();
// => true

// date-fns
import isLeapYear from 'date-fns/isLeapYear';
isLeapYear(new Date(2000, 0, 1));
// => true

// dayjs ⚠️ 要引入 isLeapYear 插件
import isLeapYear from 'dayjs/plugin/isLeapYear';
dayjs.extend(isLeapYear);
dayjs('2000').isLeapYear();
// => true

Это объект даты

Проверьте, является ли переменная объектом js Date.

// Moment.js
moment.isDate(new Date());
// => true

// date-fns
import isDate from 'date-fns/isDate';
isDate(new Date());
// => true

// dayjs ❌  不支持

Суммировать

Если вам нужны только простые операции, тоday.jsбольше подходит для вас, если проект немного сложнее, тоdate-fnsвыглядит более уместно.

о

Эта статья была переведена jon-millent

• github github.com/Jon-Millent
• blog chiyude.fan
• исходный адресНа GitHub.com/ пока нет...