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
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:
const now = new Date();
console.log(now); // Outputs current date and time
2. Setting a specific date and time:
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:
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:
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 yearsetMonth(month): set monthsetDate(day): set day of the monthsetHours(hours): set hourssetMinutes(minutes): set minutessetSeconds(seconds): set seconds
Example:
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:
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:
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:
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:
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:
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:
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"
GO TO FULL VERSION