React Datepicker CSS испортил - PullRequest
Новая
       68

React Datepicker CSS испортил

0 голосов
/ 29 апреля 2020

Я использую этот модуль от HackerOne: https://reactdatepicker.com

После установки и импорта модуля в мой проект я решил выбрать на сайте компонент Выбрать время.

Мой код 

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>

        );
    }
}

Мой вывод https://i.stack.imgur.com/2L1Rv.png

Это не должно быть так ... На сайте есть рабочая демоверсия. Что я делаю не так?

РЕДАКТИРОВАТЬ : Ответ есть в комментариях. Мне не хватало css импорта

1 Ответ

0 голосов
/ 29 апреля 2020

Похоже, мне не хватало css импорта. Жаль, что сайт не упомянул это четко. 

import "react-datepicker/dist/react-datepicker.css"
...