CodeGym/Courses/Frontend SELF EN/Date. Formatting Dates and Numbers

Date. Formatting Dates and Numbers

Available

2.1 Date Object

Working with dates and numbers is an important part of web application development. JavaScript provides built-in objects and methods for manipulating dates and numbers. In this lecture, we'll check out the Date object, its methods, and ways to format dates and numbers.

The Date object in JavaScript represents a date and time. It has lots of methods for working with dates, including getting the current date and time, setting a date and time, and formatting them.

Creating a Date Object

Important!
If you create a Date() object without parameters, it will contain the current date and time — the moment of its creation.

You can create a Date object in several ways.

1. Current date and time:

JavaScript
const now = new Date();

console.log(now); // Outputs current date and time

2. Setting a specific date and time:

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

console.log(specificDate); // Outputs date of July 7, 2024

3. Setting date and time using numeric values:

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

console.log(anotherDate); // Outputs date of July 7, 2024

2.2 Date() Object Methods

Getting date components:

  • getFullYear(): get year (four digits)
  • getMonth(): get month (0 to 11)
  • getDate(): get day of the month (1 to 31)
  • getHours(): get hours (0 to 23)
  • getMinutes(): get minutes (0 to 59)
  • getSeconds(): get seconds (0 to 59)

Example:

JavaScript
const now = new Date();

console.log(now.getFullYear()); // Current year
console.log(now.getMonth()); // Current month (-1)
console.log(now.getDate()); // Current day
console.log(now.getHours()); // Current hour
console.log(now.getMinutes()); // Current minute
console.log(now.getSeconds()); // Current second

Setting date components:

  • setFullYear(year): set year
  • setMonth(month): set month
  • setDate(day): set day of the month
  • setHours(hours): set hours
  • setMinutes(minutes): set minutes
  • setSeconds(seconds): set seconds

Example:

JavaScript
const date = new Date();

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

console.log(date.toString());

2.3 Formatting Dates

JavaScript provides methods for formatting dates into strings. The most popular method is toLocaleDateString() to format a date depending on the locale.

Example of toLocaleDateString() usage:

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)

toLocaleTimeString() Method

The toLocaleTimeString() method returns the time as a string in a localized format:

JavaScript
const now = new Date();

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

toLocaleString() Method

The toLocaleString() method returns the date and time as a string in a localized format:

JavaScript
const now = new Date();

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

toISOString() Method

The toISOString() method returns the date and time in ISO 8601 format:

JavaScript
const now = new Date();

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

2.4 Formatting Numbers

toLocaleString() Method

The toLocaleString() method allows formatting numbers according to local settings:

JavaScript
const number = 1234567.89;

console.log(number.toLocaleString()); // "1,234,567.89" in US format or "1 234 567,89" in local format
console.log(number.toLocaleString('de-DE')); // "1.234.567,89" in Germany format

Formatting numbers with Intl.NumberFormat

The Intl.NumberFormat constructor provides even more flexible options for formatting numbers:

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"
1
Task
Frontend SELF EN,  level 37lesson 1
Locked
Current Date and Time
Current Date and Time
1
Task
Frontend SELF EN,  level 37lesson 1
Locked
Date Components
Date Components
Comments
  • Popular
  • New
  • Old
You must be signed in to leave a comment
This page doesn't have any comments yet