Formidable Forms: How to set end date for JQuery Datepicker based on chosen start date

If you wish to set a date such as end date based on start date, you can use JQuery to do it.

For Formidable Forms, you can go to the Form’s Settings -> Customize HTML and add the Javascript code in the “After Fields” section.

The following source code will calculate and show the end date (10 days after the start date) when the page loads. When the start date changes, the end date will be updated as well.

<script type="text/javascript">
jQuery(document).ready(function($){

    //when the document loads
    $('#field_exercise_startdate').ready(function(){
        
        var addDays = "10";
        var dateOneString = $("#field_exercise_startdate").datepicker({ dateFormat: 'yy-mm-dd' }).val();
        if ( dateOneString === '' ) {
            return;
        }

        var finalDate = $("#field_exercise_startdate").datepicker( 'getDate' );
        finalDate.setDate(finalDate.getDate() + 10 );

        //Set date for HTML Field
        let ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(finalDate);
        let mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(finalDate);
        let da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(finalDate);
        console.log(`${da}-${mo}-${ye}`);
        output_Date=`${ye}-${mo}-${da}`;
        document.getElementById("plan_enddate").innerHTML = output_Date;
    });

    //when there are changes in the start date field
    $('#field_exercise_startdate').change(function(){

        var addDays = "10";
        var dateOneString = $("#field_exercise_startdate").datepicker({ dateFormat: 'yy-mm-dd' }).val();
        if ( dateOneString === '' ) {
            return;
        }

        var finalDate = $("#field_exercise_startdate").datepicker( 'getDate' );
        finalDate.setDate(finalDate.getDate() + 10 );

        //Set date for HTML Field
        let ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(finalDate);
        let mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(finalDate);
        let da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(finalDate);
        console.log(`${da}-${mo}-${ye}`);
        output_Date=`${ye}-${mo}-${da}`;
        document.getElementById("plan_enddate").innerHTML = output_Date;
    });

});
</script>

Ensure the “Read” only and “Required” fields are not selected.