diff --git a/frontend/src/utils/safari_date.js b/frontend/src/utils/safari_date.js
deleted file mode 100644
index 117353ed11..0000000000
--- a/frontend/src/utils/safari_date.js
+++ /dev/null
@@ -1,49 +0,0 @@
-// date keys for handling safari date input //
-function isIntegerKey(key) {
-  return (key >= 48 && key <= 57) || (key >= 96 && key <= 105);
-}
-
-function isArrowOrEnterKey(key) {
-  return (key >= 37 && key <= 40) || key === 13;
-}
-
-function isBackSpaceOrDeleteKey(key) {
-  return key === 8 || key === 46;
-}
-
-function validateInputDate(event) {
-  const key = event.keyCode;
-  // only allow integer, backspace, delete, arrow or enter keys
-  if (!(isIntegerKey(key) || isBackSpaceOrDeleteKey(key) || isArrowOrEnterKey(key))) {
-    event.preventDefault();
-  }
-}
-
-function deleteDashInputDate(event) {
-  const key = event.keyCode;
-  const date = event.target.value;
-  // remove two chars before the cursor's position if deleting dash character
-  if (isBackSpaceOrDeleteKey(key)) {
-    const cursorPosition = event.target.selectionStart;
-    if (date[cursorPosition - 1] === '-') {
-      event.target.value = date.slice(0, cursorPosition - 1);
-    }
-  }
-}
-
-window.formatInputDateOnKeyDown = function formatInputDateOnKeyDown(event) {
-  validateInputDate(event);
-  deleteDashInputDate(event);
-};
-
-window.appendDashInputDate = function appendDashInputDate(event) {
-  const date = event.target.value;
-  // append dash to date with format yyyy-mm-dd
-  if (date.match(/^\d{4}$/) !== null) {
-    event.target.value = `${event.target.value}-`;
-  } else if (date.match(/^\d{4}-\d{2}$/) !== null) {
-    event.target.value = `${event.target.value}-`;
-  }
-};
-
-export default 'test';
diff --git a/frontend/src/utils/safari_date.ts b/frontend/src/utils/safari_date.ts
new file mode 100644
index 0000000000..a670453aa9
--- /dev/null
+++ b/frontend/src/utils/safari_date.ts
@@ -0,0 +1,54 @@
+// date keys for handling safari date input //
+function isIntegerKey(key: string) {
+  return !Number.isNaN(+key);
+}
+
+function isArrowOrEnterKey(key: string) {
+  return key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight' || key === 'ArrowUp' || key === 'Enter';
+}
+
+function isBackSpaceOrDeleteKey(key: string) {
+  return key === 'Backspace' || key === 'Delete';
+}
+
+function validateInputDate(event: KeyboardEvent) {
+  const key = event.key;
+  // only allow integer, backspace, delete, arrow or enter keys
+  if (!(isIntegerKey(key) || isBackSpaceOrDeleteKey(key) || isArrowOrEnterKey(key))) {
+    event.preventDefault();
+  }
+}
+
+function deleteDashInputDate(event: KeyboardEvent) {
+  const key = event.key;
+  // remove two chars before the cursor's position if deleting dash character
+  if (isBackSpaceOrDeleteKey(key) && event.target !== null && 'value' in event.target
+    && 'selectionStart' in event.target) {
+    const date = event.target.value as string;
+    const cursorPosition = event.target.selectionStart as number;
+    if (date[cursorPosition - 1] === '-') {
+      event.target.value = date.slice(0, cursorPosition - 1);
+    }
+  }
+}
+
+function formatInputDateOnKeyDown(event: KeyboardEvent) {
+  validateInputDate(event);
+  deleteDashInputDate(event);
+}
+
+function appendDashInputDate(event: KeyboardEvent) {
+  // append dash to date with format yyyy-mm-dd
+  if (event.target !== null && 'value' in event.target) {
+    const date = event.target.value as string;
+    if (date.match(/^\d{4}$/) !== null) {
+      event.target.value = `${event.target.value}-`;
+    } else if (date.match(/^\d{4}-\d{2}$/) !== null) {
+      event.target.value = `${event.target.value}-`;
+    }
+  }
+}
+
+Object.assign(window, { formatInputDateOnKeyDown, appendDashInputDate });
+
+export default 'test';