[#1936] Migrate safari_date.js to typescript (#2053)

Currently, there is still some JavaScript code which remains unmigrated.
This allows for type unsafe code to be written, potentially resulting in
unintended behavior.

Let's migrate safari_date.js to TypeScript code to facilitate future
changes to the code.

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';