You are viewing limited content. For full access, please sign in.

Discussion

Discussion

How to set a min on a Date/Time field

Forms Version 11 Web Customizations Classic Form Designer How To
Updated April 22
posted on April 3

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.

0 0
replied on April 7

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.

2 0
replied on April 22

Hello Rui,

 

I am by no means an expert at JavaScript.  I worked with ChatGPT to get the code below.  It doesn't work exactly like I want.  I am okay with the user not being able to select today as the startDate, but with this code the endDate won't validate for the same day.  I would like it work that for endDate, the user can't have a date before the startDate and if they select the same date as the startDate it then validates that the time selected is after the time selected for the startDate field.  I appreciate any help. Normally, I would just have a date field and a time field, but for the Due Date to work properly in the process I need them in the same field.

$(document).ready(function () {
    const $startField = $('.startDate input');
    const $endField = $('.endDate input');

    // Function to parse date and time correctly from the input field
    function parseDateTime(val) {
        if (!val) return null;
        
        // For simplicity, check if the format is YYYY-MM-DDTHH:MM (ISO 8601 format)
        const dateTime = new Date(val);
        
        // If the date parsing returns "Invalid Date", then it's not a valid date.
        return dateTime instanceof Date && !isNaN(dateTime) ? dateTime : null;
    }

    // Check if the start date/time is valid (not in the past)
    function isStartDateTimeValid() {
        const val = $startField.val();
        if (!val) return false;

        const start = parseDateTime(val);
        const now = new Date();

        return start && start >= now;
    }

    // Check if the end date/time is valid (must be after start date/time)
    function isEndDateTimeValid() {
        const startVal = $startField.val();
        const endVal = $endField.val();

        if (!startVal || !endVal) return true;  // No end date to check yet

        const start = parseDateTime(startVal);
        const end = parseDateTime(endVal);

        return start && end && end > start;
    }

    // Validate that startDate isn't in the past
    function showStartDateTimeWarning() {
        if (!isStartDateTimeValid()) {
            alert("Start Date/Time cannot be in the past.");
            $startField.val(''); // Clear the field if invalid
        }
    }

    // Validate that endDate is after startDate
    function showEndDateTimeWarning() {
        if (!isEndDateTimeValid()) {
            alert("End Date/Time must be after the Start Date/Time.");
            $endField.val(''); // Clear the field if invalid
        }
    }

    // Only validate the end date/time if both start and end are populated
    function conditionalEndValidation() {
        if ($startField.val() && $endField.val()) {
            showEndDateTimeWarning();
        }
    }

    // Attach event listeners to both start and end fields
    $startField.on('change', function () {
        console.log('Start Date Changed:', $startField.val());  // Log to see the value
        showStartDateTimeWarning();
        conditionalEndValidation();
    });

    $endField.on('change', function () {
        console.log('End Date Changed:', $endField.val());  // Log to see the value
        conditionalEndValidation();
    });

    // Final check before form submission
    $('form').on('submit', function (e) {
        console.log('Form Submission Validation');
        if (!isStartDateTimeValid()) {
            alert("Start Date/Time cannot be in the past.");
            e.preventDefault(); // Prevent form submission
        }

        if (!isEndDateTimeValid()) {
            alert("End Date/Time must be after the Start Date/Time.");
            e.preventDefault(); // Prevent form submission
        }
    });
});

 

replied on April 22

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('');
        }
    });
});

 

1 0
replied on April 3

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.  

 

 

0 0
replied on April 3

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.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...