W projektach frontendowych często pojawia się potrzeba manipulacji datami – czy to do obliczania terminów, czy do formatowania dat w bardziej czytelny sposób. Inny przykład, to użycie minimalnej lub maksymalnej daty w komponencie kalendarza, czy walidatora (np. wymagamy aby wprowadzona data urodzenia należała do osoby dorosłej). Dziś przyjrzymy się, jak można to zrobić w Vue 3, korzystając z funkcji getAdjustedDate oraz popularnej biblioteki moment.js. Przykład pisany jest w Composition API z wykorzystaniem TypeScript, ale myślę, że jak ktoś używa np VUE 2 i pisze w Options API, da sobie radę z przerobieniem omawainwgo kodu.
Importowanie Moment.js
Na początek, musimy zaimportować moment.js, który ułatwia nam pracę z datami:
import moment from 'moment';
Moment.js jest jedną z najpopularniejszych bibliotek do manipulacji i formatowania dat w JavaScript. Zapewnia łatwe w użyciu funkcje, które pomogą nam rozwiązać wiele problemów związanych z datami.
Funkcja getAdjustedDate
Nasza funkcja getAdjustedDate służy do obliczania nowej daty na podstawie przesunięcia o określoną liczbę dni, miesięcy lub lat względem podanej daty. Jeśli nie podamy daty początkowej, funkcja użyje bieżącej daty.
/**
* Get date before or after n days, months or years
* @param n number of days, months or years
* @param type days, months or years
* @param date date to start from (default is current date). May be string (example: '2024-01-25') or Date object
* @param format return date format (default is 'YYYY-MM-DD')
*/
export const getAdjustedDate = (n: number, type: string, date?: any, format?: string) => {
date = date || new Date();
format = format || 'YYYY-MM-DD';
const newDate = new Date(date);
if (type === 'days') {
newDate.setDate(newDate.getDate() + n);
} else if (type === 'months') {
newDate.setMonth(newDate.getMonth() + n);
} else if (type === 'years') {
newDate.setFullYear(newDate.getFullYear() + n);
}
return moment(newDate).format(format);
};
Jak działa getAdjustedDate?
Parametry:
- n: Liczba dni, miesięcy lub lat, o które chcemy przesunąć datę.
- type: Jednostka czasu (days, months, years).
- date: Data początkowa (opcjonalna, domyślnie bieżąca data). Może być w formie stringa (np. '2024-01-25′) lub obiektu Date.
- format: Format zwracanej daty (opcjonalny, domyślnie 'YYYY-MM-DD’).
Ustawienie domyślnych wartości:
Jeśli date nie jest podana, ustawiamy ją na bieżącą datę. Jeśli format nie jest podany, domyślnie zwrócona zostanie data w formacie ’YYYY-MM-DD’.
Tworzenie nowej daty:
Tworzymy nowy obiekt Date na podstawie podanej daty lub bieżącej daty.
Modyfikacja daty:
W zależności od wartości type, przesuwamy datę o n dni, miesięcy lub lat. Wartość ujemna odejmuje od wybranej daty podaną ilość dni, miesięcy lub lat.
Formatowanie i zwracanie daty:
Korzystamy z moment.js do sformatowania nowej daty zgodnie z podanym formatem i zwracamy ją.
Mam nadzieję, że ten artykuł pomógł wam zrozumieć, jak używać tej funkcji w waszych projektach. Jeśli macie pytania, dajcie znać w komentarzach! Gotowy kod do pobrania wraz z przykładem użycia dostępny na GitHub Gist.
