dayjs - любовь на века
В этой статье опишу всю боль по работе с built-in объектом new Date() и как эту боль не испытывать с библиотекой dayjs.
Итак, почему я остановился именно на этой библиотеке для работы со временем в JS? Давайте признаем, что работать со временем в ванильном js это сущий ад и кошмар, как и в принципе в любом ЯП без "ванильного сахара".
Итак, что мы делаем, когда хотим получить дату в формате YYYY-mm-dd на чистом JS:
const date = new Date();
// Получаем год, месяц и день
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // Месяцы начинаются с 0
const day = String(date.getDate()).padStart(2, '0');
// Форматируем дату в формате YYYY-MM-DD
const isoDate = `${year}-${month}-${day}`;
// 2025-05-18То же самое значение получить в dayjs:
const date = dayjs().format("YYYY-mm-dd")Другие примеры:
Прибавление 3 дней к текущей дате:
- чистый JS
// Создаем новый объект Date для текущей даты
const currentDate = new Date();
// Прибавляем 3 дня
currentDate.setDate(currentDate.getDate() + 3);
// Получаем год, месяц и день
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // Месяцы начинаются с 0
const day = String(currentDate.getDate()).padStart(2, '0');
// Форматируем дату в формате YYYY-MM-DD
const isoDate = `${year}-${month}-${day}`;- dayjs
const date = dayjs().add(3, 'day').format("YYYY-mm-dd");В общем, дальше итак понятно, что работать с dayjs само удовольствие. Какую еще функциональность предлагает библиотека:
- парсинг даты
// Парсинг даты в формате ISO8601
dayjs('2018-04-04T16:00:00.000Z') // допускается и без T
dayjs('2018-04-13 19:18')
// Парсинг в своем формате
var customParseFormat = require("dayjs/plugin/customParseFormat");
// import customParseFormat from 'dayjs/plugin/customParseFormat' // ES 2015
dayjs.extend(customParseFormat);
dayjs("12-25-1995", "MM-DD-YY")
// Парсинг с локализацией
require('dayjs/locale/es')
dayjs('2018 Enero 15', 'YYY MMMM DD', 'es')- геттеры и сеттеры
// использует перегруженные геттеры и сеттеры
// те, если dayjs().second() то это будет геттер
// dayjs().second(30) это будет сеттер
dayjs().second(30).valueOf() // => new Date().setSeconds(30)
dayjs().second() // => new Date().getSeconds()
// для месяца
dayjs().date() // получает день текущего месяца
dayjs().date(1) // возвращает новый объект dayjs
// для года
dayjs().year() // получает текущий год
dayjs().year(2000) // выдаёт новый объект dayjs
// и тд- добавление
const a = dayjs()
const b = a.add(7, 'day')
Единица Сокращение Описание
day d День
week w Неделя
month M Месяц
quarter Q Квартал ( зависящий QuarterOfYear plugin )
year y Год
hour h Час
minute m Минута
second s Секунда
millisecond ms Миллисекунда- вычитание
dayjs().subtract(7, 'year')Остальное можно подчерпнуть из документации.
Как я подключаю библиотеку в своих проектах на Next.js:
'use client';
import 'dayjs/locale/ru';
import dayjs from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider as Provider } from '@mui/x-date-pickers/LocalizationProvider';
type Props = {
children: React.ReactNode;
};
export function LocalizationProvider({ children }: Props) {
dayjs.locale('ru');
return (
<Provider dateAdapter={AdapterDayjs} adapterLocale="ru">
{children}
</Provider>
);
}
// app/layout.tsx
type Props = {
children: React.ReactNode;
};
export default async function RootLayout({ children }: Props) {
return (
<html lang="ru" suppressHydrationWarning>
<body>
<LocalizationProvider>
{children}
</LocalizationProvider>
</body>
</html>
);
}
// использование
/** output: 17 Apr 2022
*/
export function fDate(date: DatePickerFormat, format?: string) {
if (!date) {
return null;
}
const isValid = dayjs(date).isValid();
return isValid ? dayjs(date).format(format ?? formatStr.date) : 'Неправильный формат даты';
}В заключение хочется сказать, что библиотека очень компактная (~2kB) и функциональная. Использую повсеместно с удовольствием.
Обсуждение участников