JavaScript Date: Building a React Hook For Date Selector

JavaScript Date: Building a React Hook For Date Selector

This week, I had to construct a date selector form in React that looks like this. As you can see, the user interface includes the surrounding month and date options in addition to the selected date. This means that I need to not only keep track of the current date, but I also need a way to conveniently figure out how many days are in the selected month.

As you can see, the user interface includes the surrounding month and date options in addition to the selected date. This means that I need to not only keep track of the current date, but I also need a way to conveniently figure out how many days are in the selected month and which months come before and after that selected month.

When I first looked at this design, I thought I was going to have to write a bunch of helper functions for this. But I didn’t have a lot of time, so I decided to see what JavaScript’s Date object could do for me in this situation.


It turns out, the Date object is well suited to solve this problem. I started out by just playing around with it in my browser console. I was surprised to find that the Date object’s constructor method behaves in exactly the way I needed it to in order to easily get the required information.

The constructor method can be used in a few different ways. For this task, I created a date like so:

new Date(year, monthIndex, day)

The monthIndex is the month’s order number starting from 0 instead of 1.

To make it easier on myself, I created a hook and some setter functions to create new Date objects each time the date changed:

const dateObj = new Date(2000, 0, 1);
const [date, setDate] = useState(dateObj);

const setMonth = month => {
  const newDate = new Date(
    date.getFullYear(),
    month,
    date.getDate()
  );
  setDate(newDate);
};
const setDay = day => {
  const newDate = new Date(
    date.getFullYear(),
    date.getMonth(),
    day
  );
  setDate(newDate);
};
const setYear = year => {
  const newDate = new Date(
    year,
    date.getMonth(),
    date.getDate()
  );
  setDate(newDate);
};

programming javascript-development programming-tips javascript javascript-tips

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

Hire Best JavaScript Developers | JavaScript development company USA

Hire Dedicated JavaScript Developers from a top javascript development agency for your business solutions. We provide JS web developers for hire at a fixed or hourly rate.

How to start writing less error-prone code in JavaScript

How to start writing less error-prone code in JavaScript - Everything in JavaScript is an object!’. We said that this assertion is false. Many things in JavaScript can behave like an object, but that doesn’t mean it’s the object. We can say we have three types of objects (objects, functions and arrays) in JavaScript.

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

top 30 Python Tips and Tricks for Beginners

In this post, we'll learn top 30 Python Tips and Tricks for Beginners