Hacktoberfest - 3rd contribution
Tags: opensource, hacktoberfest, osd600
Published: 2021-10-27 02:26:38

This time, I picked the [game-knight](https://github.com/tyler-morales/game-night) repository to work on. This is an interesting project to easily record the result of any games we play with our friends and family.
In the previous issues that I took on, I did fix a bug raised by others and also fixed a bug that I raised myself. For this one, I decided to try something new - contributing a brand new feature

### The new feature
The application currently allowed users to record games played within the day. The project owner wanted to add a date picker to make it flexible to record games on any days ([issue #30](https://github.com/tyler-morales/game-night/issues/30)).

### The implementation
The first thing I did was to look for a date picker library. There were a lot to choose from but I needed one that would look most similar to the theme of the application so my choice went to [react-day-picker](https://react-day-picker.js.org/). The UI looks simple and would be the best fit for Game-night. 

I read through the documents to understand how this component works and also went through the examples as I tried to implement it. There was no problem with the functionality of the date picker but I had to struggle with the styling. The download link for the stylesheet provided in [react-day-picker documentation](https://react-day-picker.js.org/docs/styling) was broken so I had to use the browser's inspector to find out the class names to overwrite the default styling. After doing some more research on similar problems, I was able to create a date picker that matches the theme of the app.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/acgp6a38dzugpzb1h3bs.png)
 
After looking at my pull request, the owner suggested that we could use [an input field](https://react-day-picker.js.org/examples/input) instead of [a calendar](https://react-day-picker.js.org/examples/basic) so that the date-picker won't take up too much space. The full calendar should only be expanded if the users need to change the date. I also shared my opinion that users should only able to select date in the past. We both agreed with each other's ideas so I went on to update the feature.
```
{/* Date Picker */}
<div className="flex flex-col gap-3">
   <label className=" text-lg text-left" htmlFor="winners">
      Please select a day
   </label
   <DayPickerInput 
      format='YYYY/MM/DD'
      value={date}
      placeholder={date}
      onDayChange={day => {setDate(day)}}
      dayPickerProps={{
         disabledDays:{after: new Date()}
      }}
   />
</div>
```

Before finalizing the feature, I found that the owner was using variables for color so I decided to [update](https://github.com/tyler-morales/game-night/pull/50/commits/f357557a855bb5ae7d8026aa77c82e47cafc6cef) the colors in `dayPicker.css` file with those variables to maintain the consistency.

It took me longer than expected to resolve the issue but I am very happy and satisfied with the final outcome.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7wbnhp35ok6ca9tdr5r.jpg)
 
Issue-3 link: https://github.com/tyler-morales/game-night/issues/30
PR-3 link: https://github.com/tyler-morales/game-night/pull/50