1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
import {usePalette} from 'lib/hooks/usePalette'
import React, {useCallback, useState} from 'react'
import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
// @ts-ignore types not available -prf
import {unstable_createElement} from 'react-native-web'
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 pal = usePalette('default')
const [value, setValue] = useState(toDateInputValue(props.value))
const onChangeInternal = useCallback(
(v: Date) => {
if (!v) {
return
}
setValue(toDateInputValue(v))
props.onChange(v)
},
[setValue, props],
)
return (
<View style={[pal.borderDark, styles.container]}>
{unstable_createElement('input', {
type: 'date',
testID: props.testID,
value,
onChange: (e: any) => onChangeInternal(e.currentTarget.valueAsDate),
style: [pal.text, pal.view, pal.border, styles.textInput],
placeholderTextColor: pal.colors.textLight,
accessibilityLabel: props.accessibilityLabel,
accessibilityHint: props.accessibilityHint,
accessibilityLabelledBy: props.accessibilityLabelledBy,
})}
</View>
)
}
// we need the date in the form yyyy-MM-dd to pass to the input
function toDateInputValue(d: Date): string {
return d.toISOString().split('T')[0]
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
paddingHorizontal: 4,
borderWidth: 1,
borderRadius: 10,
},
textInput: {
flex: 1,
width: '100%',
paddingVertical: 10,
paddingHorizontal: 10,
fontSize: 17,
letterSpacing: 0.25,
fontWeight: '400',
borderRadius: 10,
borderWidth: 0,
},
})
|
