Date Object

Depending on the time you are reading this, the specific moment in time can be represented like this MM/DD/YYYY HH:MM:SS TZ. Which represents:

• MM: The current month.
• DD: The current day.
• YYYY: The current year.
• HH: The current hour.
• MM: The current minute.
• SS: The current second.
• TZ: The local timezone.

I live in Harare, Zimbabwe, so mine would look like this: Mon Oct 24 2022 17:34:39 GMT+0200 (Central Africa Time). It's a bit hard to digest dates in JavaScript without grasping the fundamentals of objects in general.

Objects are data structures that use key-value pairs to store data. A key is a reference to a value within an object and the value is the specific data that keys point to. A typical JavaScript object looks like this:

let cars = { // The objects name is 'cars'
    car1:{ // 'car1' is a property
            brand: "Mercedes Benz", // 'brand' is a value
            model: "S300",
            year: 2002
    },
    car2:{
            brand: "Jeep",
            model: "Wrangler",
            year: 2013
    },
    car3: {
        brand: "Ford",
        model: "Ranger",
        year: 2022
    }
};

If I wanted to output the second car, I would use console.log(cars.car2);. This would return the entire object of the second car:

Objects are the fundamental data structure behind the Date() object.

Creating Dates

A JavaScript date object is created by writing the following code:

var certainDay = new Date(); // 'certainDay' is the name of the variable

The output can be retrieved by:

console.log(certainDay);

Which returns:

There are two types of operations we can perform on a date object and they can be differentiated as getting and setting values.

Retrieving Date Properties (get)

Some date object methods are listed in the table below:

The methods listed above can also be used in a variable such as:

    var certainDay = new Date();
    var day = certainDay.getDate();
    console.log(day);

Configuring Date Properties (set)

While JavaScript allows us to retrieve date properties, we are also able to set values as we please. This is a form of date manipulation and allows us to play around with the date. When you define a date, it is created using current information.

But, you can also define a date as you please like this:

    var futureDay = new Date("May 17 2023"); // Initializes the date using the value inside parentheses
    console.log(futureDay);

This returns the date that I've specified within quotation marks inside parentheses. My birthday in 2023 will be on a Wednesday 🎂.

The table below shows the common date methods for setting values. The methods can be applied to the variable var someDay = new Date();.

Please note: The setMonth() string works similar to an array. The first month (January) is referenced as 0 and December as 11. Similarly, the day is referenced as the first of the month = 0, and the last day of the month is 1 less than the total number of days e.g. January = 30. With the setDate() method, a day can be specified as any number which will be added to the current date.

Date Conversion

The date can be displayed in several different formats. Let's reference the code block below:

    var someDay = new Date();

    console.log(`toDateString(): ${someDay.toDateString()}`);
    console.log(`toISOString(): ${someDay.toISOString()}`);
    console.log(`toJSON(): ${someDay.toJSON()}`);
    console.log(`toLocaleDateString(): ${someDay.toLocaleDateString()}`);
    console.log(`toLocaleString(): ${someDay.toLocaleString()}`);
    console.log(`toString(): ${someDay.toString()}`);
    console.log(`toUTCString(): ${someDay.toUTCString()}`);
    console.log(`toTimeString(): ${someDay.toTimeString()}`);
    console.log(`toLocaleTimeString(): ${someDay.toLocaleTimeString()}`);
    console.log(`toGMTString(): ${someDay.toGMTString()}`);

The outputs of each line of code respectively:

The date object is a fantastic feature within JavaScript and using great design, you can create interesting web pages that make use of the in-built manipulation that comes with it. Here is a simple program that calculates the number of years remaining until a future set date.

var thisDay = new Date();
var someDay = new Date("25 December 2050");
var futureYear = someDay.getFullYear() + 1;
var currentYear = thisDay.getFullYear();
var timeLeft = futureYear - currentYear;
console.log(`${timeLeft} years left until ${someDay.getFullYear()}`);

Read this article that I wrote about arrays in JavaScript. Also, let me know what you think about this article.

Thanks for reading