How to get the first day of a year using JavaScript

Posted on by Edward Anderson
Get the First Day of a Year using JavaScript

We will learn how to get the first day of a year using JavaScript by two different methods, namely Date() and moment(). Each method is rather straightforward, and you can choose whichever you want.

Get the first day of a year using JavaScript

Using new Date() constructor

The new Date() constructor creates a date from a string that represents the date and then returns a Date object. If no parameter is passed to the function, it will returns a Date represent the current day. However, you can specify the year, month and day through this method.

Syntax:

new Date(year, monthIndex, day)

Parameters:

  • year: A number represents the desired year of the date.
  • monthIndex: A number represents the desired month starting from 0th for January.
  • day: A number represents the desired day of the date.

You can get the first day of a year, for example, 2022, by specifying the year is 2022, the monthIndex is 0, and the day is 1:

// Get the first day of a year
let first = new Date(2022,0,1);
console.log(first)

Output: 

Sat Jan 01 2022 00:00:00 GMT+0700

However, if you want to reduce the code, you can easily neglect the day argument and pass 2022 and 0 only:

// Get the first day of a year
let first = new Date(2022,0);
console.log(first)

Result:

Sat Jan 01 2022 00:00:00 GMT+0700

Or, you can even specify a date string to this constructor to get the first day of a year:

// Get the first day of a year
let first = new Date("2022-01-01");
console.log(first)

Output: 

Sat Jan 01 2022 00:00:00 GMT+0700

As you can see, the three examples above both produce the same results as we expect. However, we don’t suggest you use the third one, as the string you pass must strictly follow a rule of formatting, otherwise, the constructor cannot know what date you want:

let first = new Date("1th Jan 2022");
console.log(first)

Result:

Invalid Date

Using moment()

This moment() method comes from the moment.js library, which needs importing from the src tag:

<script src = "https://momentjs.com/downloads/moment.js"> </script>

You can use the function moment() and it will return any moment object which matches with you description:

<html>
<head>
  <script crossorigin="anonymous" src = "https://momentjs.com/downloads/moment.js" > </script>
 </head>
<body>
<h1>LearnShareIT</h1>
<h1>LearnShareIT</h1>
<h1>LearnShareIT</h1>
<h1>LearnShareIT</h1>
<h1>LearnShareIT</h1>
<h1>LearnShareIT</h1>
<h1>LearnShareIT</h1>
<script type="text/javascript" >
    document.getElementsByTagName("h1")[0].innerHTML = moment("2022");
    document.getElementsByTagName("h1")[1].innerHTML = moment("01/01/2022");
    document.getElementsByTagName("h1")[2].innerHTML = moment("Learn Share IT 2022");
    document.getElementsByTagName("h1")[3].innerHTML = moment("Get the First Day of a Year 2022");
    document.getElementsByTagName("h1")[4].innerHTML = moment("01 01 2022");
    document.getElementsByTagName("h1")[5].innerHTML = moment("2022 jan");
    document.getElementsByTagName("h1")[6].innerHTML = moment("1 January 2022");
</script>
</body>
</html>

Result (click the execute button to see this):

We have provided you with 6 examples as above, all these examples produce the same results as in the output. If you want to get the first day of the current year instead without knowing what the year is, you can use the moment().startOf(‘year’) method to do so.

<html>
<head>
  <script crossorigin="anonymous" src = "https://momentjs.com/downloads/moment.js" > </script>
</head>
<body>
<h1>LearnShareIT</h1>
<script type="text/javascript">
    document.getElementsByTagName("h1")[0].innerHTML = moment().startOf('year');
</script>
</body>
</html>

Output: 

Sat Jan 01 2022 00:00:00 GMT+0700

Summary

We have learned how to get the first day of a year using JavaScript. If you want to get the first day of the current year which may change in the future, you should consider using the moment() method. Otherwise, if you know what exactly the year is and don’t want to change it, use the first solution.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *