react-bootstrap-datetimepicker icon indicating copy to clipboard operation
react-bootstrap-datetimepicker copied to clipboard

Refactored version

Open LKay opened this issue 9 years ago • 10 comments

@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 avatar Dec 11 '15 04:12 LKay

@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';

mohanzhang avatar Dec 11 '15 19:12 mohanzhang

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

onethread avatar Dec 11 '15 21:12 onethread

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 avatar Dec 11 '15 21:12 mohanzhang

@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-npmwhich will create you libdirectory 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:8080in your browser.

@shadowii The name doesn't matter as main component is returned by export defaultso you can name it anything in your import.

LKay avatar Dec 12 '15 03:12 LKay

@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 avatar Dec 12 '15 04:12 LKay

@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?

onethread avatar Dec 14 '15 19:12 onethread

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 avatar Dec 15 '15 01:12 LKay

@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 avatar Jan 13 '16 22:01 vakopian

@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.

LKay avatar Jan 14 '16 01:01 LKay

sadly there seems to be no progress here :-(

barbalex avatar Apr 24 '16 15:04 barbalex