diff --git a/docusaurus/docs/time-picker.md b/docusaurus/docs/time-picker.md index 950f9318..f7f7468d 100644 --- a/docusaurus/docs/time-picker.md +++ b/docusaurus/docs/time-picker.md @@ -105,3 +105,11 @@ The icon used to toggle between the OS input. Defaults to `keyboard-outline`. Yo **clockIcon** `Type: string | undefined` The icon used to toggle between time picker and input. Defaults to `clock-outline`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/). + +**use24HourClock** +`Type: boolean | undefined` +Flag indicating if the time input should use the 24 hours clock. Defaults to the system clock. + +**inputFontSize** +`Type: number | undefined` +Font size of the time input. Defaults to 57. Useful when using a custom font. diff --git a/src/Time/TimeInput.tsx b/src/Time/TimeInput.tsx index 96b2f4d7..6bc30da8 100644 --- a/src/Time/TimeInput.tsx +++ b/src/Time/TimeInput.tsx @@ -24,6 +24,7 @@ interface TimeInputProps pressed: boolean onChanged: (n: number) => any inputType: PossibleInputTypes + inputFontSize?: number } function TimeInput( @@ -34,6 +35,7 @@ function TimeInput( onPress, onChanged, inputType, + inputFontSize = 57, ...rest }: TimeInputProps, ref: any @@ -77,6 +79,7 @@ function TimeInput( // eslint-disable-next-line react-native/no-inline-styles { color, + fontSize: inputFontSize, backgroundColor, borderRadius: theme.roundness * 2, borderColor: @@ -123,7 +126,6 @@ function TimeInput( const styles = StyleSheet.create({ root: { position: 'relative', height: 80, width: 96 }, input: { - fontSize: 57, textAlign: 'center', textAlignVertical: 'center', width: 96, diff --git a/src/Time/TimeInputs.tsx b/src/Time/TimeInputs.tsx index 69721e48..21605496 100644 --- a/src/Time/TimeInputs.tsx +++ b/src/Time/TimeInputs.tsx @@ -27,6 +27,7 @@ function TimeInputs({ inputType, onChange, is24Hour, + inputFontSize, }: { inputType: PossibleInputTypes focused: PossibleClockTypes @@ -39,6 +40,7 @@ function TimeInputs({ focused?: undefined | PossibleClockTypes }) => any is24Hour: boolean + inputFontSize?: number }) { const startInput = React.useRef(null) const endInput = React.useRef(null) @@ -78,6 +80,7 @@ function TimeInputs({ any onChange: onChangeFunc + use24HourClock?: boolean + inputFontSize?: number }) { const [displayMode, setDisplayMode] = React.useState<'AM' | 'PM' | undefined>( undefined @@ -53,6 +57,9 @@ function TimePicker({ // method to check whether we have 24 hours in clock or 12 const is24Hour = React.useMemo(() => { + if (use24HourClock !== undefined) { + return use24HourClock + } const formatter = new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit', @@ -60,7 +67,7 @@ function TimePicker({ }) const formatted = formatter.format(new Date(Date.UTC(2020, 1, 1, 23))) return formatted.includes('23') - }, [locale]) + }, [locale, use24HourClock]) // Initialize display Mode according the hours value React.useEffect(() => { @@ -104,6 +111,7 @@ function TimePicker({ >