DatePicker ref (#52)

* changes DatePicker to use a React Ref * fixes small CSS bug in example
openlawteam · Apr 10, 2019 · 422fc93 · 422fc93
1 parent f120b2b
commit 422fc93
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/example/index.js b/example/index.js
@@ -173,6 +173,7 @@ const styles = {
     padding: '12px 24px',
     position: 'fixed',
     right: 0,
+    top: 0,
   },
   pre: {
     wordBreak: 'break-all',

diff --git a/src/DatePicker.js b/src/DatePicker.js
@@ -21,6 +21,7 @@ type State = {
 export class DatePicker extends React.PureComponent<Props, State> {
   id: string;
   flatpickr: flatpickr;
+  flatpickrRef: {current: null | HTMLInputElement} = React.createRef(); 
 
   state = {
     enableTime: this.props.enableTime,
@@ -31,7 +32,7 @@ export class DatePicker extends React.PureComponent<Props, State> {
 
     const { cleanName } = this.props;
     const timestamp = new Date().getTime().toString();
-    this.id = this.id || `date_${cleanName}_${timestamp}`;
+    this.id = `date_${cleanName}_${timestamp}`;
 
     const self: any = this;
     self.onChange = this.onChange.bind(this);
@@ -57,11 +58,7 @@ export class DatePicker extends React.PureComponent<Props, State> {
       options.defaultDate = new Date(parseInt(this.props.savedValue));
     }
 
-    this.flatpickr = flatpickr(document.getElementById(this.id), options);
-  }
-
-  componentWillUnmount() {
-    this.flatpickr.destroy();
+    this.flatpickr = flatpickr(this.flatpickrRef.current, options);
   }
 
   get isIOS() {
@@ -92,6 +89,7 @@ export class DatePicker extends React.PureComponent<Props, State> {
           <input
             id={this.id}
             placeholder={description}
+            ref={this.flatpickrRef}
           />
         </label>