Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kurs Javy /Frontend SELF PL /Date. Formatowanie dat i liczb

Date. Formatowanie dat i liczb

Frontend SELF PL
Poziom 37 , Lekcja 1
Dostępny

2.1 Obiekt Date

Praca z datami i liczbami to ważna część tworzenia aplikacji webowych. JavaScript dostarcza wbudowane obiekty i metody do manipulowania datami i liczbami. W tym wykładzie omówimy obiekt Date, jego metody oraz sposoby formatowania dat i liczb.

Obiekt Date w JavaScript reprezentuje datę i czas. Ma wiele metod do pracy z datami, w tym pobieranie bieżącej daty i czasu, ustawianie daty i czasu, a także formatowanie.

Tworzenie obiektu Date

Ważne!
Jeśli tworzysz obiekt Date() bez parametrów, będzie on zawierał aktualną datę i godzinę — moment swojego utworzenia.

Obiekt Date można utworzyć na kilka sposobów.

1. Bieżąca data i czas:

JavaScript
    
      const now = new Date();

      console.log(now); // Wyświetla bieżącą datę i godzinę

2. Ustawienie konkretnej daty i czasu:

JavaScript
    
      const specificDate = new Date('2024-07-07T10:00:00');

      console.log(specificDate); // Wyświetla datę 7 lipca 2024 roku
Java university

3. Ustawienie daty i czasu za pomocą wartości liczbowych:

JavaScript
    
      const anotherDate = new Date(2024, 6, 7, 10, 0, 0);

      console.log(anotherDate); // Wyświetla datę 7 lipca 2024 roku

2.2 Metody obiektu Date()

Uzyskiwanie komponentów daty:

  • getFullYear(): pobiera rok (cztery cyfry)
  • getMonth(): pobiera miesiąc (od 0 do 11)
  • getDate(): pobiera dzień miesiąca (od 1 do 31)
  • getHours(): pobiera godziny (od 0 do 23)
  • getMinutes(): pobiera minuty (od 0 do 59)
  • getSeconds(): pobiera sekundy (od 0 do 59)

Przykład:

JavaScript
    
      const now = new Date();

      console.log(now.getFullYear()); // Bieżący rok
      console.log(now.getMonth()); // Bieżący miesiąc (-1)
      console.log(now.getDate()); // Bieżący dzień
      console.log(now.getHours()); // Bieżąca godzina
      console.log(now.getMinutes()); // Bieżąca minuta
      console.log(now.getSeconds()); // Bieżąca sekunda

Ustawienie komponentów daty:

  • setFullYear(year): ustawia rok
  • setMonth(month): ustawia miesiąc
  • setDate(day): ustawia dzień miesiąca
  • setHours(hours): ustawia godziny
  • setMinutes(minutes): ustawia minuty
  • setSeconds(seconds): ustawia sekundy

Przykład:

JavaScript
    
      const date = new Date();

      date.setFullYear(2025);
      date.setMonth(0); // Styczeń
      date.setDate(15);
      date.setHours(12);
      date.setMinutes(30);
      date.setSeconds(45);

      console.log(date.toString());

2.3 Formatowanie dat

JavaScript dostarcza metody do formatowania dat w ciąg znaków. Najbardziej popularna metoda to toLocaleDateString() do formatowania daty w zależności od lokalizacji.

Przykład użycia toLocaleDateString():

JavaScript
    
      const now = new Date();

      console.log(now.toLocaleDateString('en-US')); // "7/7/2024" (MM/DD/YYYY)
      console.log(now.toLocaleDateString('en-GB')); // "07/07/2024" (DD/MM/YYYY)
      console.log(now.toLocaleDateString('ru-RU')); // "07.07.2024" (DD.MM.YYYY)

Metoda toLocaleTimeString()

Metoda toLocaleTimeString() zwraca czas w formie ciągu znaków w zlokalizowanym formacie:

JavaScript
    
const now = new Date();

console.log(now.toLocaleTimeString('en-CA')); 
console.log(now.toLocaleTimeString('en-GB'));

Metoda toLocaleString()

Metoda toLocaleString() zwraca datę i czas w formie ciągu znaków w zlokalizowanym formacie:

JavaScript
    
      const now = new Date();

      console.log(now.toLocaleString('en-CA')); 
      console.log(now.toLocaleString('en-GB'));

Metoda toISOString()

Metoda toISOString() zwraca datę i czas w formacie ISO 8601:

JavaScript
    
      const now = new Date();

      console.log(now.toISOString()); // "2023-07-05T10:00:00.000Z"

2.4 Formatowanie liczb

Metoda toLocaleString()

Metoda toLocaleString() pozwala formatować liczby zgodnie z lokalnymi ustawieniami:

JavaScript
    
      const number = 1234567.89;

      console.log(number.toLocaleString()); // "1,234,567.89" w formacie USA lub "1 234 567,89" w lokalnym formacie
      console.log(number.toLocaleString('de-DE')); // "1.234.567,89" w formacie Niemiec

Formatowanie liczb za pomocą Intl.NumberFormat

Konstruktor Intl.NumberFormat oferuje jeszcze bardziej elastyczne możliwości formatowania liczb:

JavaScript
    
      const number = 1234567.89;

      const usFormatter = new Intl.NumberFormat('en-US');
      console.log(usFormatter.format(number)); // "1,234,567.89"

      const deFormatter = new Intl.NumberFormat('de-DE');
      console.log(deFormatter.format(number)); // "1.234.567,89"

      const customFormatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
      });

      console.log(customFormatter.format(number)); // "$1,234,567.89"
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION