diff --git a/src/components/datepicker.tsx b/src/components/datepicker.tsx
index 6357004b..9490178f 100644
--- a/src/components/datepicker.tsx
+++ b/src/components/datepicker.tsx
@@ -344,7 +344,7 @@ class SemanticDatepicker extends React.Component<
       selectedDateFormatted,
       typedValue,
     } = this.state;
-    const { clearable, locale, pointing, filterDate } = this.props;
+    const { clearable, locale, pointing, filterDate, readOnly } = this.props;
     return (
       <div className="field" style={style} ref={this.el}>
         <Input
@@ -353,7 +353,7 @@ class SemanticDatepicker extends React.Component<
           onBlur={this.handleBlur}
           onChange={this.handleChange}
           onClear={this.resetState}
-          onClick={this.showCalendar}
+          onClick={readOnly ? null : this.showCalendar}
           onKeyDown={this.handleKeyDown}
           value={typedValue || selectedDateFormatted}
         />