There is an annoying problem when I try to implement DatePicker form input in my simple frontend project. I've a page that displays a user form based on this code:
import React, { Component } from 'react';
import AppNavbar from './AppNavbar'
import DatePicker from 'react-datepicker'
import './App.css'
import { Container, FormGroup, Form, Button, Input, Label } from 'reactstrap'
import {Link} from 'react-router-dom'
class CostLog extends Component {
state = { }
render() {
return (
<div>
<AppNavbar />
<h2 style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50px'}}>Cost overview</h2>
<Container>
<Form>
<FormGroup>
<Label for='title'>Title</Label>
<Input className='input-cust' type='text' name='title' id='title' onChange={this.inputHandler} />
</FormGroup>
<FormGroup>
<Label for='title'>Category</Label>
<Input type='text' name='category' id='category' onChange={this.inputHandler} />
</FormGroup>
<FormGroup>
<Label for='date'>Date of Payment</Label>
<div className='datepicker-cust'>
<DatePicker className='datepicker-cust' onChange={this.inputHandler} value={this.state.date} />
</div>
</FormGroup>
<FormGroup>
<Label for='Place of Receipt Issuance'>Place of Invoicing</Label>
<Input type='text' name='place' id='place' onChange={this.inputHandler} />
</FormGroup>
<FormGroup>
<Button color='info' type='submit'>Save</Button>{' '}
<Button color='secondary' tag={Link} to="/cat/total">Drop</Button>
</FormGroup>
</Form>
</Container>
</div>
);
}
}
export default CostLog;
Additively, case-related snippets inside of stylesheet file:
.datepicker-cust {
width: 500px;
}
.react-datepicker-wrapper, .react-datepicker__input-container {
display: block !important;
}
To be noted, I use div around DatePicker to make this field a bit broader. Whenever it's clicked, picker appears as a single column of days above the field, i.e. all days follow each other in vertical order, nothing like a normal calendar view I want to see. Using developer tool in Chrome, Mozilla, etc., I can suggest the problem takes its origin in zero width of Popper: it has a width equal to 0 and length 200.
This project I'm working on is just my first experience with React and its components. I found out what might be inconsistent here (supposing Popper has wrong size). This solution for a topic-related issue doesn't work in my case: still the same vertical column of numbers instead of two-dimensional calendar pop-up. What needs to be changed in properties to display that as expected?
