Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Working with dates is common in web development, especially when building calendars, date pickers, or time-based features. JavaScript provides built-in methods to handle dates, and there are also external libraries that make date manipulation easier.
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
JavaScript's built-in Date object provides methods to extract and manipulate date components. We can use these methods to find the first and last date of the current month.
The getDate() method returns the day of the month (from 1 to 31). The getFullYear() method returns the four-digit year, and the getMonth() method returns the month (from 0 to 11).
Syntax
var date = new Date(); var firstDay = new Date(date.getFullYear(), date.getMonth(), 1); var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
Here, we create a firstDay object by passing 1 as the day parameter, which gives us the first day of the current month. For the lastDay, we increment the month by 1 and set the day to 0, which automatically rolls back to the last day of the previous month (current month).
Example
In this example, we create date objects to find the first and last day of the current month and display them in the browser.
<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 popular JavaScript library for parsing, validating, manipulating, and displaying dates. It provides an easier and more readable way to work with dates compared to the native Date object.
Syntax
const firstDate = moment().startOf('month').format('DD-MM-YYYY');
const lastDate = moment().endOf('month').format('DD-MM-YYYY');
The startOf('month') method returns the first day of the current month, while endOf('month') returns the last day. The format() method allows you to specify the output format.
Example
In this example, we use Moment.js to get the first and last dates of the current month in DD-MM-YYYY format.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.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>
Comparison
| Method | Setup Required | Code Complexity | File Size |
|---|---|---|---|
| Native Date Object | None | Medium | Built-in |
| Moment.js | External library | Simple | ~300KB |
Conclusion
Both approaches effectively get the first and last dates of the current month. Use the native Date object for lightweight applications, or Moment.js for more complex date manipulations and better readability.
35K+ Views
