From 23e62b18de9537b50c8b1df2b4744adc030501d0 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 3 Feb 2025 12:27:58 -0800
Subject: Date input improvements (#7639)

* add max date, use modern field for birthday input

* rm legacy date input

* handle simplifying to simpleDateString internally

* update jsdoc
---
 src/components/forms/DateField/index.tsx | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

(limited to 'src/components/forms/DateField/index.tsx')

diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx
index 1c78d2abb..eca4d5cbd 100644
--- a/src/components/forms/DateField/index.tsx
+++ b/src/components/forms/DateField/index.tsx
@@ -16,10 +16,11 @@ export * as utils from '#/components/forms/DateField/utils'
 export const LabelText = TextField.LabelText
 
 /**
- * Date-only input. Accepts a date in the format YYYY-MM-DD, and reports date
- * changes in the same format.
+ * Date-only input. Accepts a string in the format YYYY-MM-DD, or a Date object.
+ * Date objects are converted to strings in the format YYYY-MM-DD.
+ * Returns a string in the format YYYY-MM-DD.
  *
- * For dates of unknown format, convert with the
+ * To generate a string in the format YYYY-MM-DD from a Date object, use the
  * `utils.toSimpleDateString(Date)` export of this file.
  */
 export function DateField({
@@ -29,6 +30,7 @@ export function DateField({
   label,
   isInvalid,
   accessibilityHint,
+  maximumDate,
 }: DateFieldProps) {
   const {_} = useLingui()
   const t = useTheme()
@@ -56,21 +58,29 @@ export function DateField({
         isInvalid={isInvalid}
         accessibilityHint={accessibilityHint}
       />
-      <Dialog.Outer control={control} testID={testID}>
+      <Dialog.Outer
+        control={control}
+        testID={testID}
+        nativeOptions={{preventExpansion: true}}>
         <Dialog.Handle />
-        <Dialog.Inner label={label}>
+        <Dialog.ScrollableInner label={label}>
           <View style={a.gap_lg}>
             <View style={[a.relative, a.w_full, a.align_center]}>
               <DatePicker
                 timeZoneOffsetInMinutes={0}
                 theme={t.name === 'light' ? 'light' : 'dark'}
-                date={new Date(value)}
+                date={new Date(toSimpleDateString(value))}
                 onDateChange={onChangeInternal}
                 mode="date"
                 testID={`${testID}-datepicker`}
                 aria-label={label}
                 accessibilityLabel={label}
                 accessibilityHint={accessibilityHint}
+                maximumDate={
+                  maximumDate
+                    ? new Date(toSimpleDateString(maximumDate))
+                    : undefined
+                }
               />
             </View>
             <Button
@@ -84,7 +94,7 @@ export function DateField({
               </ButtonText>
             </Button>
           </View>
-        </Dialog.Inner>
+        </Dialog.ScrollableInner>
       </Dialog.Outer>
     </>
   )
-- 
cgit 1.4.1