Reputation: 123
I am using this module by HackerOne: https://reactdatepicker.com
After installing and importing the module to my Project i decided to pick the Select time component from the site.
My Code
import React, { Component } from "react";
import { Form, Button } from "react-bootstrap"
import DatePicker from "react-datepicker"
export default class AddEventModal extends Component {
constructor(props) {
super(props)
this.state = {
date: new Date()
}
}
render() {
return (
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Title <span style={{ color: "red" }}>*</span></Form.Label>
<Form.Control type="text" placeholder="Enter a Title" className="col-6" />
<Form.Text className="text-muted">
Enter a Title for your Event.
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Description</Form.Label>
<Form.Control type="text" placeholder="Enter a Description" className="col-6" />
</Form.Group>
<DatePicker
selected={this.state.date}
onChange={newDate => this.setState({ date: newDate })}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
timeCaption="time"
dateFormat="MMMM d, yyyy h:mm aa"
/>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="success" type="submit">
Submit
</Button>
</Form>
);
}
}
My Output https://i.sstatic.net/2L1Rv.png
It shouldn't be like this... The site has the working demo. What am I doing wrong?
EDIT: Answer is in the comments. I was missing a css import
Upvotes: 1
Views: 2517
Reputation: 123
Seems like I was missing a css import. Too bad the site didn't mention this clearly.
import "react-datepicker/dist/react-datepicker.css"
Upvotes: 6