React-day-picker: Hard to style with bootstrap and other UI frameworks

[raRaRa]

Hi, I'm currently using the DayPickerInput to select a day within a form. Works great, but it's incredible hard to style with UI frameworks such as Bootstrap. For instance, I want to use it within an input group, but it's not possible because the DayPickerInput component renders a div wrapper around the input element.

What could I do? I was thinking about simply using the DayPicker component inside a modal window that I control myself, but that's really annoying :(

Thanks!

[raRaRa]

I ended up using the DayPicker component, and handling the visibility of it myself. E.g. when someone clicks on an input to make it visible, or when clicking outside the DayPicker to hide it.

My suggestion would be to avoid creating any wrapper around the input element (or have it as optional where you can choose the wrapper yourself).

Thanks.

[gpbl]

@raRaRa I was thinking about your issue during the last days and I agree about the wrapper. The reason we use a wrapper was to avoid code to align the overlay relative to the input field (which now is done via CSS). An option could be to use react-popper for it, so that DayPickerInput would render just the input field.

[unkls]

Hi, @raRaRa I'm facing the same problem. How do you manage the display of DayPicker ? With using div ?
Thank's in advance.

[raRaRa]

Hi @unkls

I wrote a component which controls the display of the DayPicker.

Constructor:

    constructor(props) {
        super(props)

        this.ref = React.createRef()
        this.dayPickerRef = React.createRef()

        this.state = {
            isPickerVisible: false,
        }
    }

Various helper functions in the component, e.g. to close or open the picker and to check if the user clicked outside the picker, which will close it.

    componentWillUnmount = () => {
        document.removeEventListener('click', this.clickOutsideCheck)
    }

    clickOutsideCheck = (e) => {
        if (this.state.isPickerVisible && !this.ref.current.contains(e.target)) {
            this.onClickOutside()
        }
    }

    onClickOutside = () => {
        if (this.state.isPickerVisible) {
            this.closePicker()
        }
    }

    closePicker = () => {
        this.setState({ isPickerVisible: false })

        document.removeEventListener('click', this.clickOutsideCheck)
    }

    openPicker = () => {
        this.setState({ isPickerVisible: true })
        document.addEventListener('click', this.clickOutsideCheck)
    }

And the day picker:

{this.state.isPickerVisible &&
    <div
        className={style.datePicker}
        ref={this.ref}
    >
        <DayPicker
            ref={this.dayPickerRef}
            onDayClick={this.onDayClick}
            showOutsideDays={true}

        />
    </div>
}

Hope this helps.

[unkls]

Yeah thank's a lot !

[crimson11]

Hi guys,

I thought, I had the same problem (correct styling of input-elem within a bootstrap styled form). But tbh - I don't get your problem?

It is no problem to style the input-element rendered by <DayPickerInput>! You simply have to set the property "inputProps" of DayPickerInput. For example:

<DayPickerInput id="returnDate" inputProps={{className: 'form-control'}} onDayChange={this.onReturnDayChange}   value={this.state.orderData.pickupReturnDate}/>

So in the above example I set the class of the Input element to bootstrap form-control, which styles/renders perfectly in my bootstrap forms. The fact, that the Input element is enclosed in a <div> by <DayPickerInput> doesn't hurt … at least in my case. :)
Or am I missing something?

Edit: Ah - now realized, that you were talking about input-groups. In my example, I am working with form-groups, which works flawlessly! I.e. here the enclosing <div> is not visible/doesn't matter.

[sonsonixon]

I use inputProps={{ className: 'form-control' }} to add CSS class in react-day-picker