tiny-date-picker icon indicating copy to clipboard operation
tiny-date-picker copied to clipboard

Does this datepicker support React?

Open javeedrahman opened this issue 7 years ago • 2 comments

javeedrahman avatar Mar 16 '19 18:03 javeedrahman

Hey @javeedrahman . I'm a little late, but you can easily integrate this lib (and other vanilla JS libs) in React by using a ref. Take a look https://reactjs.org/docs/integrating-with-other-libraries.html

kevinfiol avatar Dec 08 '20 19:12 kevinfiol

Hey, just ran over the same "Problem". I made a wrapper class:

import React from "react";
import TinyDatePicker from 'tiny-date-picker';
// Make sure, we have all the CSS
import 'tiny-date-picker/tiny-date-picker.min.css';

export default class TinyDatePickerReact extends React.Component {
        // I use TypeScript so el is any
	el:any = null;
	componentDidMount() {
                // create the Datepicker
		this.el = TinyDatePicker(this.el);
                // Do something with it
		this.el.open();
	}

	componentWillUnmount() {
                // If this compontents gets removed, remove the Datepicker first
		this.el.destroy();
	}

	render() {
                // reference an input element
		return <input ref={el => this.el = el} />;
	}
}

Hope I could help.

johannes-ross avatar Dec 08 '20 20:12 johannes-ross