Manipulacja Datami w Vue 3 z użyciem Moment.js

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.

Info: Masz jakieś pytania? Chciałbyś coś dodać do tego artykułu, czy też zauważyłeś jakieś błędy? Zostaw komentarz, a postaram się odpowiedzieć.

Udostępnij

Zobacz również

Komentarze

Subskrybuj
Powiadom o
guest

0 komentarzy
Inline Feedbacks
Zobacz wszystkie komentarze
0
Chętnie poznam Twoje zdanie, proszę o komentarzx