0

I'm writing a movie-logging React application, and I'm trying to incorporate Blueprint's DateInput component in an 'add movie' dialog I've written. I've followed their example to the best of my ability but it seems like there's some issue with how it's rendering the Popover.

Here's what I'm trying to get it to look like:

correct DateInput

And here's what ends up getting rendered:

incorrect DateInput

I'm not sure if there's something wrong with my code or if the component just doesn't work, but I've used the Chrome React extension and compared the props on my DateInput to the aforementioned example on Blueprint's website. I didn't notice any significant differences that would likely affect layout/sizing.

Here's my code:

<div className="addMovieRow">
                <div className="addMovieLabel">date watched: </div>
                        <DateInput
                            fill={true}
                            highlightCurrentDay={true}
                            closeOnSelection={true}
                            defaultValue={new Date()}
                            onChange={(pEvt) => {
                                this.setState({
                                    date: [pEvt],
                                    lastWatched: pEvt
                                });
                            }}
                            formatDate={this.props.formatDate}
                            parseDate={(pDateStr) => new Date(pDateStr)}
                            popoverProps={{fill: true, position: Position.BOTTOM}}
                            /> 
                </div>
Ben M.
  • 1

1 Answers1

0

Solved: turns out I was missing the CSS files from Blueprint.

https://stackoverflow.com/a/49903843/15349102

Ben M.
  • 1