1 files changed, 92 insertions, 0 deletions
diff --git a/src/view/com/util/forms/DateInput.web.tsx b/src/view/com/util/forms/DateInput.web.tsx
new file mode 100644
index 000000000..89dff5510
--- /dev/null
+++ b/src/view/com/util/forms/DateInput.web.tsx
@@ -0,0 +1,92 @@
+import React, {useState, useCallback} from 'react'
+import {
+  StyleProp,
+  StyleSheet,
+  TextInput as RNTextInput,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {useTheme} from 'lib/ThemeContext'
+import {usePalette} from 'lib/hooks/usePalette'
+
+interface Props {
+  testID?: string
+  value: Date
+  onChange: (date: Date) => void
+  buttonType?: string
+  buttonStyle?: StyleProp<ViewStyle>
+  buttonLabelType?: string
+  buttonLabelStyle?: StyleProp<TextStyle>
+  accessibilityLabel: string
+  accessibilityHint: string
+  accessibilityLabelledBy?: string
+}
+
+export function DateInput(props: Props) {
+  const theme = useTheme()
+  const pal = usePalette('default')
+  const palError = usePalette('error')
+  const [value, setValue] = useState(props.value.toLocaleDateString())
+  const [isValid, setIsValid] = useState(true)
+
+  const onChangeInternal = useCallback(
+    (v: string) => {
+      setValue(v)
+      const d = new Date(v)
+      if (!isNaN(Number(d))) {
+        setIsValid(true)
+        props.onChange(d)
+      } else {
+        setIsValid(false)
+      }
+    },
+    [setValue, setIsValid, props],
+  )
+
+  return (
+    <View style={[isValid ? pal.border : palError.border, styles.container]}>
+      <FontAwesomeIcon
+        icon={['far', 'calendar']}
+        style={[pal.textLight, styles.icon]}
+      />
+      <RNTextInput
+        testID={props.testID}
+        style={[pal.text, styles.textInput]}
+        placeholderTextColor={pal.colors.textLight}
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardAppearance={theme.colorScheme}
+        onChangeText={v => onChangeInternal(v)}
+        value={value}
+        accessibilityLabel={props.accessibilityLabel}
+        accessibilityHint={props.accessibilityHint}
+        accessibilityLabelledBy={props.accessibilityLabelledBy}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    borderRadius: 6,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 4,
+  },
+  icon: {
+    marginLeft: 10,
+  },
+  textInput: {
+    flex: 1,
+    width: '100%',
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+    fontSize: 17,
+    letterSpacing: 0.25,
+    fontWeight: '400',
+    borderRadius: 10,
+  },
+})