react-bootstrap-datetimepicker
react-bootstrap-datetimepicker copied to clipboard
Refactored version
@chollier Great work in porting this library to react. I took some time and refactored your code greatly as it currently lacks a lot of functionalities the original plugin has. I added custom icons, locale features (#58, #80, #96, #126, #130), 24 hours support (#105), minDate
and maxDate
support (#114, #115), better positioning (#95, #131, #137), toolbar (#103) and transitions using react-overlays
, added decade view and probably many more. Still it needs some more work to implement all the original options but most is done. I didn't rewrite any of the tests yet.
Check out my fork and tell me what do you think. Maybe we could merge it together and make a major version upgrade and work on this together from now on?
https://github.com/LKay/react-bootstrap-datetimepicker
EDIT:
I followed the original documentation while implementing features so the component will accept the same options as here http://eonasdan.github.io/bootstrap-datetimepicker/Options/ with pretty much same format (few imporvements added). I also renamed (and deprecated) dateTime
and size
to value
and bsSize
to be more coherent with react-bootstrap
naming (the old ones will still work as before).
@LKay I just tried your fork, but it appears that the ES6 import functionality has regressed. e.g. this stopped working: import DateTimeField from 'react-bootstrap-datetimepicker';
I think it may be because the npm-build setting has been removed from his package.json, so if you pulled down his version through npm, it's not creating the library.
Also, I believe it's DateTimePicker, not DateTimeField
Ah, thanks for the explanation @shadowii - I ended up switching back to this repo and didn't look into it any further. That would also explain some of the other errors I saw when I ran webpack.
@mohanzhang It's not yet PR ready so you can't import it straight to your project by downloading files via npm. This is more like a preview version right now as build script has to be automated. For now if you want to test the component in your app then you have to clone my fork and run npm run build-npm
which will create you lib
directory with ES6->ES5 transpiled files which you can import to your project (package.json
has already defined main
property pointing to index.js
file inside lib
directory).
If you want just preview (a very simple one for now) clone the form and run npm start
and open localhost:8080
in your browser.
@shadowii The name doesn't matter as main component is returned by export default
so you can name it anything in your import.
@mohanzhang I added build scripts and builded files to the repo so try to fetch my fork and see if it works fine now if you replace it in your package.json
file.
@LKay pulling it from NPM now works, thanks (you can specify github paths in packages.json now).
Unfortunately DateTimePickerLayoutInput seems to depend on the browser and I can't seem to run it with an isomorphic js setup.
The line in question is 141 in input.js: DateTimePickerLayoutInput.defaultProps = { container: global.document.querySelector("body") };
Should I open an issue in your repro?
Maybe my fork is better for issues in my code.
Anyway picker doesn't entirely depend on browser, yet it's most common and preferred way of use the plugin, though. I added support for property widgetParent
in which you can specify the React compatible node to act as a container for popover so it doesn't have to be an actual DOM node but an other React component for example.
By default,I assumed the code is run in the browser so default container should be document's root element for positioning.
The easiest way would be to specify parent component as container by:
...
render () {
return (<DateTimePicker widgetParent={ this } />)
}
...
@LKay I really like the changes you've made to the library, I definitely encourage you to make a pull request so it can be merged into upstream. Are you still maintaining your branch? I've created a couple of issues and a pull request to your fork, but hasn't gotten any feedback from you. If you have abandoned the project, please let us know
@vakopian I have not abandoned the project, yet a I was busy with some other work and lack time recently. I was not getting github notifications for some reason either... I'll take a look at the issues there but about merging it to the main branch I'd like to first add some tests before that.
sadly there seems to be no progress here :-(