Using a third-party React component - react-datetime

Linked Projects:

Calreact

✨ 1 person thanked Hrishi Mittal for this tutorial.

👍 Send Thanks
 
Correction Note: The best practice is to store third-party JavaScript and CSS files in the vendor/assets directory, not the app/assets directory as shown in this video.

Lesson links:

Lesson code - https://github.com/learnetto/calreact/tree/lesson-3.6

react-datetime component - https://github.com/YouCanBookMe/react-datetime

So now we're going to look at adding an interactive calendar widget for choosing the appointment date and time. 

This is what it looks like and we're going to add this our app using the react-datetime component. It's a nice component that uses moment.js and since we already installed moment.js, we just need to get this component. Since we directly using it inside rails instead of installing from npm, which is just standard way of using it, we need to download the minified javascript and the css files and replace that in our assets directory and then add the react data file to the application.js file. 

//= require react-datetime.min

 <Datetime />

Okay. Now we can use it by replacing the input field for an appointment time. We can just use it like any other react component by adding tag Datetime and close that. Refresh the page and if I click in this field, I'll get the calender, so our component works. you can choose a date and a time. You go back to the calendar by clicking on the date, now let's attach the appointment time to the component by setting the inputProps attribute, which is a prop for defining attributes for the input element of the component. 

 var inputProps = {
   name: 'appt_time'
 };

<Datetime input={false} open={true} inputProps={inputProps}  value={this.props.appt_time}  />

So input prop equals, let's use a variable, we'll call that inputProps to and it will be an object with a key name and value upon a time. 

let's also set a value to this.props.appt_time.

We can have it open by default. Now we can remove this old field. Finally set input to false so that the textfield won't appear.

Now let's reload and that's better. Now our submit also visible again because it got pushed out.

So for the plain input field, we have the on change attributes set to this.handleChange. We don't have that for our  data components. Let's add that. 

setApptTime: function(e) {
   var name = 'appt_time';
   var obj = {};
   if(obj[name] = e.toDate()) {
        this.props.onUserInput(obj);
   }
}

<Datetime input={false} open={true} inputProps={inputProps}
 value={this.props.appt_time}
 onChange={this.setApptTime} />

Onchange equals this.setApptTime which will define here, It will be very similar method to our handleChange method, the only difference is that here we are dealing with moment.js object instead of a string. 
So we set the name and then will have an empty object and we convert that to a date that call the onUserInput callback function with in. 

this.props.onUserInput and then pass the object. I guess it will set the data datatype, let's refresh and add an appointment. Let's say, meet with Google exec.  Lets give a date, 31st to January at 2PM, and click on make an appointment.

Let's see if its been added in the right place. Yes, there we go. So we added a date picker to our app using an external react component.

Liked this tutorial? Get more like this in your inbox