I am able to set a min for a date or time field using JavaScript, but I cannot get it to work on a date field with time checked on too. I need to set the min on a date/time field to moment/now. The issue seems to occur when trying to convert the data toISOString. Has anyone had luck with setting the min on a date/time field? If so, I would greatly appreciate it if you would share your JavaScript.
Discussion
Discussion
How to set a min on a Date/Time field
If you are on Forms 11 and you are using classic form designer, you may post your custom script here so we can check how to make it work.
If you would like to upgrade to Forms 12 and switch to modern form designer, you could use the built in date validation feature as shown in Sarah's post.
I finally got the JS to work as I wanted. The below JS works in the classic designer on Forms 11.
$(document).ready(function () { const now = moment(); const $startDate = $('#Field26'); const $startTime = $('#DateTimeField26'); const $endDate = $('#Field28'); const $endTime = $('#DateTimeField28'); // Set minDate for startDate to today $startDate.datepicker('option', 'minDate', now.toDate()); handleStartChange(); $startDate.on('change', handleStartChange); $startTime.on('change', handleStartChange); function handleStartChange() { const startDateVal = $startDate.val(); const startTimeVal = $startTime.val(); console.log('Handling start change:'); console.log('startDateVal:', startDateVal); console.log('startTimeVal:', startTimeVal); if (!startDateVal || !startTimeVal) { console.log('Start date or time is missing, exiting function.'); return; } const startMoment = moment(`${startDateVal} ${startTimeVal}`, 'MM/DD/YYYY HH:mm'); console.log('startMoment:', startMoment.format('YYYY-MM-DD HH:mm')); $endDate.datepicker('option', 'minDate', startMoment.toDate()); console.log('End date minDate set to:', startMoment.format('YYYY-MM-DD')); const endDateVal = $endDate.val(); console.log('endDateVal:', endDateVal); if (endDateVal) { const endMoment = moment(`${endDateVal} ${$endTime.val() || '00:00'}`, 'MM/DD/YYYY HH:mm'); console.log('Parsed endMoment:', endMoment.format('YYYY-MM-DD HH:mm')); if (endMoment.isBefore(startMoment)) { console.warn('End date/time is before start date/time! Clearing end fields.'); $endDate.val(''); $endTime.val(''); } } // Time restriction if same day if (endDateVal && moment(endDateVal, 'MM/DD/YYYY').isSame(startMoment, 'day')) { $endTime.attr('min', startMoment.format('HH:mm')); } else { $endTime.removeAttr('min'); } if (startMoment.isSame(now, 'day')) { $startTime.attr('min', now.format('HH:mm')); } else { $startTime.removeAttr('min'); } } $endDate.on('change', function () { const startDateVal = $startDate.val(); const startTimeVal = $startTime.val(); const endDateVal = $endDate.val(); console.log('Handling end date change:'); console.log('startDateVal:', startDateVal); console.log('startTimeVal:', startTimeVal); console.log('endDateVal:', endDateVal); if (!startDateVal || !startTimeVal || !endDateVal) { console.log('Missing one of the fields, exiting function.'); return; } const startMoment = moment(`${startDateVal} ${startTimeVal}`, 'MM/DD/YYYY HH:mm'); const endMoment = moment(endDateVal, 'MM/DD/YYYY'); console.log('startMoment for end date check:', startMoment.format('YYYY-MM-DD HH:mm')); console.log('endMoment:', endMoment.format('YYYY-MM-DD')); if (endMoment.isSame(startMoment, 'day')) { console.log('End date is the same as start date, setting min time for end time.'); $endTime.attr('min', startMoment.format('HH:mm')); } else { console.log('End date is not the same as start date, removing min time for end time.'); $endTime.removeAttr('min'); } // Full datetime check const fullEndMoment = moment(`${endDateVal} ${$endTime.val() || '00:00'}`, 'MM/DD/YYYY HH:mm'); if (fullEndMoment.isBefore(startMoment)) { console.warn('End datetime is before start datetime! Clearing end time.'); $endTime.val(''); } }); });
Unfortunately, self-hosted doesn't have that nifty feature @████████ is showing. However, you can use the Use the current date and time option on a date field and then compare the real time date/time to another date field with a set date/time. Use your show/hide rules to control what fields on the form are available during that window.
I'm on Cloud, so I don't know if this applies to version 11 or not, but if you're able to switch to the Modern Designer, this can be set under the advanced tab.