Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to get first and last date of the current month with JavaScript?
In this tutorial, we will look at how to get the first and last date of the current month using JavaScript.
In our daily lives, we frequently deal with dates, and we typically are aware of the day—or, at the very least, the month—we are in. To assist users in determining when something has occurred or will occur concerning their current situation, we display the name of a day or a month. This serves as a wonderful chronology.
Following are the approaches to get the first and last date of the month using JavaScript −
Using a Date Object
Using the Moment.js Library
Using a Date Object
In this approach, we can make use of different methods to find out the first and last date of the month.
The getDate() method is used for the specified date, that returns the day of the month (from 1 to 31). This method returns the day of the month which is represented by a number between 1 and 31.
Then we use the getFullYear() method to return the year of the specified date (four digits for years between 1000 and 9999). It gives back a number that corresponds to the year of the specified date.
The getMonth() method, which is based on local time, returns the month (from 0 to 11) for the specified date. It gives back a number, ranging from 0 to 11, denoting the month.
Syntax
Following is the syntax to get first and last day of the current month −
var date = new Date(); var firstDay = new Date(date.getFullYear(), date.getMonth(), 1); var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
Here, an object date is being created which will call the methods specified in the code. We again create a new date object firstDay to get the first day of the current month. For this, we pass the third parameter as 1. Choosing a day of 1 indicates gives us the first day of the month.
In the same way, we created the date object lastDay to get the last day of the current month. Choosing a day of 0 indicates gives us the last day of the month. When we add 1 to the getMonth() method's return value, we will move one month forward. Then, by specifying 0 as the day, we move one day backward, to the last day of the month.
Example
In this example, we can see a date object is being created. The date object calls the methods getFullYear() and getMonth() to find out the first day of the current month.
<html> <body> <h2>Get first and last date using <i>Date Object</i></h2> <p id ="date1"></p> <p id ="date2"></p> <script> var date = new Date(); var firstDay = new Date(date.getFullYear(), date.getMonth(), 1); var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0); document.getElementById("date1").innerHTML = "First day = " + firstDay; document.getElementById("date2").innerHTML = "Last day = " + lastDay; </script> </body> </html>
Using the Moment.js Library
Moment.js is a JavaScript package. This can make it very simple to parse, manipulate, validate, and display dates and times in JavaScript. Moment.js will be introduced in this chapter, followed by a thorough discussion of its features. Moment JS enables the presentation of dates in a translated and legible manner. Moment.js has a scripted approach that allows you to use it inside a browser.
Syntax
Following is the syntax for the Moment.js date format −
const moment = require('moment');
const date = new Date('2022/01/01');
moment(date).format('MMMM d, YYYY'); // January 1, 2022
The moment library is included in the script ,and a date object is created. The date object is called and formatted according to the given format.
Example
In this example, we can see how the Moment.js library is included in the script. The firstdate variable calls the moment library and returns with the first date of the month in the specified format DD-MM-YYYY. Similarly, the lastdate variable will return the last day of the month in the specific format.
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/momenttimezone/0.5.31/moment-timezone-with-data-2012-2022.min.js"></script> </head> <body> <h2>Get first and last date using <i>Moment JS</i></h2> <p id ="date1"></p> <p id ="date2"></p> <script> const firstdate = moment().startOf('month').format('DD-MM-YYYY'); const lastdate=moment().endOf('month').format("DD-MM-YYYY"); document.getElementById("date1").innerHTML = "First day = " + firstdate; document.getElementById("date2").innerHTML = "Last day = " + lastdate; </script> </body> </html>
In this tutorial, what we have learned about is how to find the first and last date of the month using JavaScript. The first method discusses the prospective of using the date object with the getDate(), getMonth(), and getFullYear() methods. The second method explores the idea of using an external library named MomentJS, which helps in formatting dates and finds the objective of this tutorial.
28K+ Views
To Continue Learning Please Login