diff --git a/frontend/src/components/date-and-time-picker.js b/frontend/src/components/date-and-time-picker.js
index d9511735d6..b6a62b1782 100644
--- a/frontend/src/components/date-and-time-picker.js
+++ b/frontend/src/components/date-and-time-picker.js
@@ -22,11 +22,40 @@ class Picker extends React.Component {
     super(props);
     this.defaultCalendarValue = null;
     this.calendarContainerRef = React.createRef();
+    this.inputRef = React.createRef();
+    this.state = {
+      isOpen: true
+    };
+  }
+
+  closeDialog = () => {
+    this.setState({
+      isOpen: false
+    });
+  }
+
+  openDialog = () => {
+    this.setState({
+      isOpen: true
+    });
+  }
+
+  clickOutsideToClose = (e) => {
+    if (!this.inputRef.current.contains(e.target) &&
+        !this.calendarContainerRef.current.contains(e.target)) {
+      this.closeDialog();
+    }
   }
 
   componentDidMount() {
     let lang = window.app.config.lang;
     this.defaultCalendarValue = moment().locale(lang).clone();
+
+    document.addEventListener('click', this.clickOutsideToClose);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.clickOutsideToClose);
   }
 
   getCalendarContainer = () => {
@@ -48,6 +77,7 @@ class Picker extends React.Component {
         getCalendarContainer={this.getCalendarContainer}
         calendar={calendar}
         value={props.value}
+        open={this.state.isOpen}
         onChange={props.onChange}
       >
         {
@@ -59,9 +89,11 @@ class Picker extends React.Component {
                   style={{ width: props.inputWidth || 250 }}
                   tabIndex="-1"
                   disabled={props.disabled}
-                  readOnly
+                  readOnly={true}
                   value={value && value.format(FORMAT) || ''}
                   className="form-control"
+                  onClick={this.openDialog}
+                  ref={this.inputRef}
                 />
                 <div ref={this.calendarContainerRef} />
               </div>