React Feature: Use the DateTime picker to your advantage

In my recent project, I was able to use the DateTime picker to my advantage. One creative way I used the DateTime picker was in my form. Recently I have been working on a training booking appointment app where users can book an appointment with a trainer. I wanted users to be able to pick a day and time for their appointment. Therefore using this react feature would be helpful and take a lot of stress of creating a custom calendar. The hard and stressful part would be capturing the data with the react feature.

Constraints and Challenges

One major challenge I faced was filtering through the calendars and time react features. There were a few calendar features I installed, however, it eventually started having issues once installed. Therefore I was forced to scour the internet with a date and time feature that fit my project needs. Luckily I was able to find one, at first, it only had a calendar feature but over time I was able to read through the documentation and discovered the time feature to go along with the calendar feature.

Quick Walkthrough

Once I found the perfect feature to go with my controlled form it was time to install it and customize it to my advantage. I went to the site, www.npmjs.com/package/react-datepicker, which held the calendar feature and I installed it with npm install react date-picker or npm I react date-picker. As soon as the package was installed in my react app I imported the component to my desired react file.

I already laid out my form inputs and values, therefore I just had to connect it with my react feature. The feature already came with examples of how to interact with the DatePicker. I utilized the states of the feature and combined it with my custom states. I was granted the luxury of showing the time along with the calendar.

Once the inputs, values, and updated states were set up I decided to test out the feature. I came across an issue with displaying the date and time separately. I was missing a feature that captured both date and time, which was the moment feature.

You can find this feature in momentjs.com Instructions are laid out on the website. I incorporated this feature to help display my form in a better way, which it did. Here’s a snippet of how I incorporated everything in my form.