🥳
Black Friday Sale is on: Get Amazing deals on tools and resourcess
postImage

Tutorial: Javascript Date Objects

blogImage

By Emmanuel Chinonso

Web Developer

JavaScript Date Objects

The JavaScript Date Object allows us to manipulate dates. By default, JavaScript will display a date as a full text string using the browser's time zone.

Contrast Bootstrap UI Kit

The new Date() constructor is used to build date objects. A new date object can be made in four ways:

  • new Date()
  • new Date(year, month, day, hours, minutes, seconds, milliseconds)
  • new Date(milliseconds)
  • new Date(date string)

new Date(): new Date() creates a date object that contains the current date and time:

JavaScript Code:

1var d = new Date();

Date objects are always the same. Although the computer clock ticks, date objects do not.

  • new Date(year, month, ...)
  • new Date(year, month, ...) generates a new date object with the date and time supplied.

Year, month, day, hour, minute, second, and millisecond (in that sequence) are specified by seven numbers:

JavaScript Code:

1var d = new Date(2018, 11, 24, 10, 33, 30, 0);

From 0 to 11 months are counted in JavaScript. The month of January has a value of 0. The year, month, day, hour, minute, and second are all represented by six numbers: year, month, day, hour, minute, and second.

JavaScript Code:

1var d = new Date(2018, 11, 24, 10, 33, 30);

JavaScript Stores Dates as Milliseconds

Since January 1, 1970, at 00:00:00 UTC, JavaScript has stored dates as a number of milliseconds (Universal Time Coordinated). The time is 00:00:00 UTC on January 1, 1970.

The current date and time is: January 1, 1970, milliseconds ago.

Date Methods

When you create a Date object, you can use a variety of methods to manipulate it. The year, month, day, hour, minute, second, and millisecond of date objects can be retrieved and set using either local or UTC (universal, or GMT) time.

Displaying Dates

By default, JavaScript outputs dates in full text string format: 01:00:00 GMT+0100 on Wednesday, March 25th, 2015 (West Africa Standard Time) When you display a date object in HTML, the toString() method converts it to a string automatically.

JavaScript Code:

1d = new Date();
2document.getElementById('demo').innerHTML = d;

Same as:

1d = new Date();
2document.getElementById('demo').innerHTML = d.toString();

To convert a date to a UTC string, use the toUTCString() function (a date display standard).

JavaScript Code:

1var d = new Date();
2document.getElementById('demo').innerHTML = d.toUTCString();

To convert a date to a more readable format, use the toDateString() method:

JavaScript Code:

1var d = new Date();
2document.getElementById('demo').innerHTML = d.toDateString();

The toISOString() method uses the ISO standard format to convert a date to a string:

JavaScript Code:

1var d = new Date();
2document.getElementById('demo').innerHTML = d.toISOString();

JavaScript Get Date Methods

To get data from a date object, use these methods:

| Method | Description | |getFullYear() | Get the year as a four digit number (yyyy) | | ----------- | --------------- | |getMonth() | Get the month as a number (0-11) | | ----------- | --------------- | |getDate() | Get the day as a number (1-31) | | ----------- | --------------- | |getHours() | Get the hour (0-23) | | ----------- | --------------- | |getMinutes() | Get the minute (0-59) | | ----------- | --------------- | |getSeconds() | Get the second (0-59) | | ----------- | --------------- | |getMilliseconds() | Get the millisecond (0-999) | | ----------- | --------------- | |getTime() | Get the time (milliseconds since January 1, 1970) | | ----------- | --------------- | |getDay() | Get the weekday as a number (0-6) | | ----------- | --------------- | | Date.now() | Get the time. ECMAScript 5. |

The getTime() Method: Since January 1, 1970, the getTime() method returns the following value in milliseconds:

JavaScript Code:

1var d = new Date();
2document.getElementById("demo").innerHTML = d.getTime();
3The getFullYear() Method
4The getFullYear() method returns the year of a date as a four digit number:
5
6**JavaScript Code:**
7```javascript
8var d = new Date();
9document.getElementById("demo").innerHTML = d.getFullYear();
10

The getDate() Method: The getDate() method produces a number (1-31) representing the day of a date:

JavaScript Code:

1var d = new Date();
2document.getElementById('demo').innerHTML = d.getDate();

The getHours() Method: The getHours() method returns a number (0-23) representing the hours of a date:

JavaScript Code:

1var d = new Date();
2document.getElementById('demo').innerHTML = d.getHours();

The getMinutes() Method: The getMinutes() method returns a number (0-59) representing the minutes of a date:

JavaScript Code:

1var d = new Date();
2document.getElementById('demo').innerHTML = d.getMinutes();

The getSeconds() Method: The getSeconds() method returns a number (0-59) representing the seconds of a date:

JavaScript Code:

1var d = new Date();
2document.getElementById('demo').innerHTML = d.getSeconds();

The getMilliseconds() Method: The getMilliseconds() method returns the milliseconds of a date as a number (0-999):

JavaScript Code:

1var d = new Date();
2document.getElementById('demo').innerHTML = d.getMilliseconds();

The getDay() Method: The getDay() method produces a number (0-6) representing the weekday of a date:

JavaScript Code:

1var d = new Date();
2document.getElementById('demo').innerHTML = d.getDay();

Even though some nations consider the first day of the week to be "Monday," the first day of the week (0) in JavaScript implies "Sunday." You can return the weekday as a name using an array of names and getDay():

JavaScript Code:

1var d = new Date();
2var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
3document.getElementById('demo').innerHTML = days[d.getDay()];

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...