Added readonly prop to make the field non-editable by typing

Author: NoahMLoomis

src/components/Datepicker.tsx

@@ -46,6 +46,7 @@ interface Props {
     disabled?: boolean;
     inputClassName?: string | null;
     containerClassName?: string | null;
+    readonly?: boolean;
 }
 
 const Datepicker: React.FC<Props> = ({
@@ -63,7 +64,8 @@ const Datepicker: React.FC<Props> = ({
     i18n = "en",
     disabled = false,
     inputClassName = null,
-    containerClassName = null
+    containerClassName = null,
+    readonly = false
 }) => {
     // Ref
     const containerRef = useRef<HTMLDivElement>(null);
@@ -257,7 +259,8 @@ const Datepicker: React.FC<Props> = ({
             value,
             disabled,
             inputClassName,
-            containerClassName
+            containerClassName,
+            readonly
         };
     }, [
         asSingle,
@@ -276,7 +279,8 @@ const Datepicker: React.FC<Props> = ({
         value,
         disabled,
         inputClassName,
-        containerClassName
+        containerClassName,
+        readonly
     ]);
 
     return (

src/components/Input.tsx

@@ -24,7 +24,8 @@ const Input: React.FC = () => {
         placeholder,
         separator,
         disabled,
-        inputClassName
+        inputClassName,
+        readonly
     } = useContext(DatepickerContext);
 
     // UseRefs
@@ -167,6 +168,7 @@ const Input: React.FC = () => {
                 type="text"
                 className={getClassName()}
                 disabled={disabled}
+                readOnly={readonly}
                 placeholder={
                     placeholder
                         ? placeholder

src/contexts/DatepickerContext.ts

@@ -31,6 +31,7 @@ interface DatepickerStore {
     disabled?: boolean;
     inputClassName?: string | null;
     containerClassName?: string | null;
+    readonly?: boolean;
 }
 
 const DatepickerContext = createContext<DatepickerStore>({
@@ -57,7 +58,8 @@ const DatepickerContext = createContext<DatepickerStore>({
     i18n: "en",
     disabled: false,
     inputClassName: "",
-    containerClassName: ""
+    containerClassName: "",
+    readonly: false
 });
 
 export default DatepickerContext;