Semantic UI styled datepicker

react
1

I’m trying to find a react datepicker component that’ll work with my semantic-ui based form.

                <div className="ui form">
                    <!-- jQuery style -->
                    <div className="field">
                        <input type="text" name="datepicker"/>
                    </div>
                    <!--OR react-datepicker -->
                    <DatePicker/>
                </div>

I’m using react-datepicker but the styling seems to conflict with semantic-ui. I was also looking at a semantic-ui styled datepicker but read that jQuery style plugins may change the DOM and upset react.

Looking for a easy way to get a datepicker that works within a semantic-ui form with react.

2

Have you already looked at the existing add-ons for aldeed:autoform already? There are datepickers available for this package, but I’m not sure if they implemented the semantic UI theme as the standard package does.

3

Found this addon for autoforms (which btw i’m not using), it refers to the same datepicker I’m using because Semantic doesn’t have datepicker support atm.

I found that it wasn’t semantic overwriting the style. It is just that the stylesheet which was part of the npm package wasn’t being packaged so the client didn’t even have it.
I ended up just copying react-datepicker’s css file into my public folder, bit of a hack…