diff --git a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx index 585a3da6ee1c888f33b5fe099d71f8ab1c19e8f7..3dd5a6914b994434a487d1f5283bf99d70c573a8 100644 --- a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx +++ b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx @@ -128,6 +128,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { const [roleTypeChoice, setRoleTypeChoice] = useState<string>('') const [t, i18n] = useTranslation('common') const today = new Date() + const [endDate, setEndDate] = useState<Date|null>(null) const [maxDate, setMaxDate] = useState(today) const todayPlusMaxDays = (roleTypeId?: number) => { @@ -308,22 +309,27 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { Number(getValues('start_date')) <= Number(getValues('end_date')), }} - defaultValue={today} render={({ field }) => ( <DatePicker mask="____-__-__" label={t('input.roleEndDate')} disabled={!roleTypeChoice} - value={field.value} + value={endDate} maxDate={maxDate} inputFormat="yyyy-MM-dd" onChange={(value) => { + setEndDate(value) field.onChange(value) }} renderInput={(params) => <TextField {...params} />} /> )} /> + {errors.end_date && errors.end_date.type === 'required' && ( + <Box sx={{ typography: 'caption', color: 'error.main' }}> + {t('validation.roleEndRequired')} + </Box> + )} {displayContactAtUnit && ( <TextField id="contact"