MantzarisVas
MantzarisVas

Reputation: 123

React Datepicker CSS messed Up

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

Answers (1)

MantzarisVas
MantzarisVas

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

Related Questions