First thing that I want to do, so I don't have to reference back to FireFox, is think about where we want to place this on our grid. In our design, we have this calendar or picker component here, so we want to place it right at the end of the skew to almost the end of our app.

In our case, let's just put it from 5 to 10. Just remember that. The column we are going to do is 5-10. Then for the row, we will just do something like 2-4, or something like that.

Let's go to our code, let's close out of the terminal, and let's close out of all of our files except for app.js. I'm going to create a new component. Let's call it: picker.js. That's going to contain our our date picker. Then in here, we are just going to give it our basic react scaffolding.

Basically, what that is, is what you see in app.js. The import React component, and all that junk. So what I want to do is go into picker.js and say:

picker.js

import React, { Component } from 'react';

class Picker extends Component {
    render() {
        return(
            <div>
                component
            </div>
        )
    }

}

export default Picker;

This is the basic React scaffolding. Remember that this is what we are going to type out every time we create a new component. I'm going to go fast whenever we create new components because you should memorize this. You'll pick it up, if you haven't by now.

We have our component, so let's go into app.js and use it. The way that we are using our grid is: we are just going to have all of our components in here. Let's put it in here. Let's say:

app.js

import React, { Component } from 'react';
import Picker from './picker';

export default class App extends Component {
  render() {
    return (
      <div className="grid">
        <h1 className="grid__title">Birthday Countdown</h1>

        <div className="grid__skew-dark-one-box"></div>
        <div className="grid__skew-dark-two"></div>
        <div className="grid__skew-dark-three"></div>

        <div className="grid__skew-light-one"></div>
        <div className="grid__skew-light-two"></div>
        <div className="grid__skew-light-three-box"></div>

        <Picker/>
      </div>
    );
  }
}

If you are using VS code you will get this Auto Import. If you look at the top: all we have is React, but if you use Auto Import it will import it automatically from './picker'. If you are not using this, or you do not have this feature, just make sure that you write this line up here.

I'm going to use this Auto Import feature a lot, but I will make sure to tell you every time I use it just in case you are using another text editor. I just wanted to make that clear, so that you understand what I'm doing as I build apps.

We imported picker right here, and you'll see it's right here. It says component.

Now let's go ahead and find it in our HTML here. We have component. You'll see that it's only on this block.

Let's extend it to where we want. Let's give this div a className="picker". Now let's go back into our style folder, let's create a new file, and let's call this file picker.scss. Let's now import this into our main.scss under clippaths. Let's say:

main.scss

@import 'base';
@import 'clippaths';

@import 'picker';

Now in picker.scss let's say:

picker.scss

.picker {
    grid-column: 5/10;
}

Let's go view this again. You'll see when you hover over component now, or picker, it extends from 5 to 10.

Now let's specify where we want it on the row axis. We want it to be from row 2 to about the end of this, so row 4. Let's just say:

picker.scss

.picker {
    grid-column: 5/10;
    grid-row: 2/4;
    background: cornflowerblue;
}

Now I want to see this in chrome, and you'll see that we have this. That's looking nice. Now we just need to put our date picker in there.

Let's go ahead and install a third-party Library called react-date-picker. I'm just going to open up a new chrome tab, and type in react date picker. Actually let's just search it on npm. So search npmjs.com. Then click on Npmjs.com, then in search packages, I'm going to put react datepicker.

Now I'm going to select the first one. This will allow us to easily implement a datepicker into our application. Notice the styles here. It looks very similar to what we have in here. That's pretty awesome. We can make it look nice. Then we will style it to make it look like this instead of like this.

We already have this functionality in the date picker functionality package done for us in the npm package. You can read all these instructions, but I'll just walk you through what we need to use. Let's copy this npm install react-datepicker --save, I'm going to hit command + j in visual studio code to open my terminal, and paste that in. That will install it.

Let's wait for that to finish. Looks like it's going to take a second, so let's go back to the npm package here and read it a bit. It say's that you need to install all of this separately, and we already have react proptypes, but we don't have a moment.

You'll see in here it says: import moment from 'moment'. That's just another fancy kind of date object it really helps you do stuff with dates. We're not really going to be using it. We are actually going to be using date objects in JavaScript, but since it is a dependency of react datepicker, we are going to have to install it.

I'm going to search a new npm here, called moment. Click on the first one, and you'll see it says some stuff about dates. Again, we are not going to use it, we are just going to convert it to a date when we do use it. We just need to install it. So let's say: npm install --save moment.

Now I'm going to go back to datepicker on NPM. Go back a few tabs or search it. So we need to import these two things: datepicker and moment, and then use them. Copy these two imports, and go into our code. Let's go into picker.js, and place it right after React.

picker.js

import React, { Component } from "react";

import DatePicker from "react-datepicker";
import moment from "moment";

class Picker extends Component {
    render() {
        return(
            <div>

            </div>
        )
    }

}

export default Picker;

Now it should be displaying nothing. Let's go ahead and put in a datepicker object. Let's go back to chrome,and look at how they do it. It looks like they are doing it the way that we want to do it.

We are going to include it in picker.js right here. So we are just going to say:

picker.js

class Picker extends Component {
    render() {
        return(
            <div className="picker">
                <DatePicker
                    selected={this.state.startDate}
                    onChange={this.handleChange}
                />
            </div>
        )
    }

}

We don't have any state, so we need to do that now. If you look back at the example in npm, they basically have all of the code that we need. They even called it handleChange. That's what I would have called it. Anyway, let's go ahead and copy all of this, except for the class. So the constructor, and handleChange.

Let's go back to our code, and let's place it right above our render function. I'm going to close the terminal. Then if you are in VS code: if you hit option + shift + f it should format it.

If it doesn't do that for you and you are using VS code, it is probably an extension. Give that functionality a Google search, and you should be able to find the extension. If it is an extension. I think it is just a part of VS code because it is such a simple feature. It just aligns all of your code.

Now we have our methods and our state. Our startDate is in moment. We have a function and we are binding it. If this is completely foreign, I recommend that you go through Jordan's Deep Dive on Props and State and this. That will really help you understand. When I say this, I am referring to the this keyword in JavaScript, specifically in React.

So we are setting our state to startDate: moment. Moment will get you the exact moment, so if you do that it will get you the current date. Now what we want to do is see if all of this is working. When we open the DatePicker and select a date, it's going to set this startDate. It's also going to run handleChange.

We aren't going to see anything in our console unless we provide a console.log, so let's go in here and add a console.log.

picker.js

handleChange(date) {
        console.log('trying to change date')
    this.setState({
        startDate: date
    });
}

Let's go back to our application, and test this out. Awesome. We have our DatePicker. When we click it, we are given all of these items here.

If we hit command + option + j, and open a console here in chrome. If we click one of these it will say: trying to change date.

Now let's go back to our code, and instead of just saying "trying to change date", let's say:

picker.js

handleChange(date) {
        console.log('trying to change date for', date)
    this.setState({
        startDate: date
    });
}

What I think it's going to do is spit out a moment object. So it might look a little funky. Let's go ahead and test it out. Let's select this, and select one of these dates. It says: "trying to change date for", and if you click this it will have all of our date stuff.

So it looks like we have a JavaScript object called _d. Let's try printing that out. Let's say:

picker.js

handleChange(date) {
        console.log('trying to change date for', date._d)
    this.setState({
        startDate: date
    });
}

Now let's go back to chrome, and check it out. Select a date, and it says:

Basically, it's going to print out whatever you select. So June 24th, 2018, you get the idea. So that's kind of an introduction to startDate, moment, and some third-party npm packages that we can install. I'm trying to think of what we should do to finish this guide off. I noticed that we don't have the styles for our date, but that kind of falls under the styles for our DatePicker.

Let's go ahead and commit our code, and in the next video we will style it to get that DatePicker in, and then we will also add in the style to make it look all nice like this. So let's commit our code in VS code. I'm going to hit command + j.

Then I'm going to say git status, git add ., and let's just say git commit -m "installed moment.js, react-datepicker, and placed picker component on grid with datepicker within it.". Let's go ahead and move on to the next video where we will style our wonderful DatePicker.

Resources

• Source Code
• Npmjs.com
• NPM - Datepicker
• NPM - Moment