Skip to content

[WV-4377] WeConnect: Date Validation for start and end date fields in Edit Info page [Team Review] #170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DaleMcGrew merged 2 commits into from
Apr 21, 2026
Merged

[WV-4377] WeConnect: Date Validation for start and end date fields in Edit Info page [Team Review] #170

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
70ddfb5
Date Validating in edit person form
pravingv Apr 20, 2026
94ebb31
Date Validating in edit person form
pravingv Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 72 additions & 7 deletions src/js/components/Person/EditPersonForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ const EditPersonForm = ({ classes }) => {
const [viewerIsOnHrTeam, setViewerIsOnHrTeam] = useState(false);
const [showAddSlackPhoto, setShowAddSlackPhoto] = useState(true);
const [slackError, setSlackError] = useState('');
const [dateStartError, setDateStartError] = useState('');
const [dateEndError, setDateEndError] = useState('');

const getDateDefaultValue = (dateString) => {
if (!dateString) return null;
Expand Down Expand Up @@ -100,6 +102,47 @@ const EditPersonForm = ({ classes }) => {
setViewerIsOnHrTeam(viewerCanSeeOrDo(['canEditPersonAnyone'], viewerAccessRights));
}, [viewerAccessRights]);

// Date validation function
const isValidDateFormat = (date) => {
if (!date) return true; // Empty dates are valid
// Check if date is a valid dayjs object
return date && date.isValid();
};

const validateStartDate = (startDate) => {
let startDateError = '';

// Validate start date format
if (startDate && !isValidDateFormat(startDate)) {
startDateError = 'Invalid start date format. Use MM-DD-YYYY.';
console.error('Start Date Validation Error:', startDateError);
}

setDateStartError(startDateError);
return !startDateError;
};

const validateEndDate = (endDate, startDate) => {
let endDateError = '';

// Validate end date format
if (endDate && !isValidDateFormat(endDate)) {
endDateError = 'Invalid end date format. Use MM-DD-YYYY.';
console.error('End Date Validation Error:', endDateError);
}

// Validate date order: end date should not be less than start date
if (endDate && startDate && isValidDateFormat(endDate) && isValidDateFormat(startDate)) {
if (endDate.isBefore(startDate)) {
endDateError = 'End date cannot be before start date.';
console.error('End Date Validation Error:', endDateError);
}
}

setDateEndError(endDateError);
return !endDateError;
};

const savePerson = (emailVerifiedOverride = null) => {
// console.log('Saving person:', activePerson, ', emailVerifiedOverride: ', emailVerifiedOverride);
activePerson.emailPersonal = emailPersonalInputRef.current.value;
Expand Down Expand Up @@ -649,9 +692,20 @@ const EditPersonForm = ({ classes }) => {
setDateStartDate(newValue);
setSaveButtonActive(true);
}}
renderInput={() => (
<TextField margin="dense" />
)}
slotProps={{
textField: {
margin: 'dense',
error: !!dateStartError,
helperText: dateStartError || ' ',
onBlur: () => validateStartDate(dateStartDate),
FormHelperTextProps: {
style: {
minHeight: '20px',
margin: '4px 14px 0',
},
},
},
}}
/>
</DateWrapper>
<DateWrapper>
Expand All @@ -662,9 +716,20 @@ const EditPersonForm = ({ classes }) => {
setDateEndDate(newValue);
setSaveButtonActive(true);
}}
renderInput={() => (
<TextField margin="dense" />
)}
slotProps={{
textField: {
margin: 'dense',
error: !!dateEndError,
helperText: dateEndError || ' ',
onBlur: () => validateEndDate(dateEndDate, dateStartDate),
FormHelperTextProps: {
style: {
minHeight: '20px',
margin: '4px 14px 0',
},
},
},
}}
/>
</DateWrapper>
</DateOptionsWrapper>
Expand Down Expand Up @@ -845,7 +910,7 @@ const EditPersonForm = ({ classes }) => {
<Button
classes={{ root: classes.savePersonButton }}
color="primary"
disabled={!saveButtonActive}
disabled={!saveButtonActive || !!dateStartError || !!dateEndError}
onClick={() => savePerson()}
variant="contained"
>
Expand Down
Loading