JS Dates 📅

Welcome to our deep dive into JavaScript's powerful Date object! This tutorial is perfect for beginners and intermediates who want to learn how to work with dates, times, and timestamps in JavaScript. 🎯

What are JavaScript Dates? 💡

In JavaScript, the Date object represents a specific point in time, including dates, times, and timestamps. You can create new Date objects, manipulate existing ones, and compare dates with ease.

Creating a Date Object 📝

To create a new Date object, you can use one of the following methods:

Using the date constructor:

javascript

let currentDate = new Date();
console.log(currentDate);

Passing arguments to the date constructor:

javascript

let myBirthday = new Date(1995, 8, 23); // Months in JavaScript are zero-indexed, so August is 8
console.log(myBirthday);

Working with Date Properties and Methods 📝

JavaScript provides various properties and methods to interact with Date objects. Here are some examples:

getFullYear(): Returns the full year (e.g., 2022)
getMonth(): Returns the month (0-11)
getDate(): Returns the day of the month (1-31)
getDay(): Returns the day of the week (0-6, Sunday is 0)
getHours(): Returns the hour (0-23)
getMinutes(): Returns the minutes (0-59)
getSeconds(): Returns the seconds (0-59)
getMilliseconds(): Returns the milliseconds (0-999)

Manipulating Dates 💡

You can manipulate dates using various methods such as setFullYear(), setMonth(), setDate(), setHours(), setMinutes(), setSeconds(), and setMilliseconds().

Here's an example where we set the date to January 1, 2023:

javascript

let myDate = new Date();
myDate.setFullYear(2023);
myDate.setMonth(0); // January is 0
myDate.setDate(1);
console.log(myDate);

Formatting Dates 💡

To format dates for display, you can use JavaScript's built-in toLocaleString() method or the moment.js library.

Formatting with `toLocaleString()`

javascript

let myDate = new Date();
let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
let formattedDate = myDate.toLocaleString("en-US", options);
console.log(formattedDate);

Using the Moment.js library 📝

First, include the moment.js library in your project:

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Then, format the date using the moment() function:

javascript

let myDate = new Date();
let formattedDate = moment(myDate).format("MMMM Do, YYYY");
console.log(formattedDate);

Date Comparison 💡

You can compare dates using the >, <, >=, and <= operators.

javascript

let date1 = new Date("December 31, 2022");
let date2 = new Date("January 01, 2023");

if (date1 < date2) {
  console.log("Date 1 is before Date 2");
}

Quiz 📝

Wrapping Up ✅

Now you've learned the basics of working with dates in JavaScript. With the Date object, you can create, manipulate, and format dates, as well as compare them. Keep exploring and practicing to master this essential concept! 🚀

JS Dates 📅

JS Dates 📅

What are JavaScript Dates? 💡

Creating a Date Object 📝

Working with Date Properties and Methods 📝

Manipulating Dates 💡

Formatting Dates 💡

Formatting with toLocaleString()

Using the Moment.js library 📝

Date Comparison 💡

Quiz 📝

Wrapping Up ✅

Formatting with `toLocaleString()`