Jetformbuilder: Auto-fill and format date inputs from MM/DD/YYYY to DD/MM/YYYY

gistfile1.txt

This jQuery script automatically populates the JetFormBuilder form date inputs with today's date in MM/DD/YYYY format and 
updates corresponding hidden fields to the DD/MM/YYYY format upon form submission. The script ensures that the dates are 
visible and considered 'selected' by the user, improving data accuracy and user experience without manual entry. It supports 
multiple date fields and can easily be configured to handle various date and hidden field IDs, making it ideal for ensuring 
consistent date formatting and handling across front-end displays and back-end processing.

1. Firstly, copy the custom HTML code and paste it into your snippet plugins. Create a new HTML snippet and save it as "footer".
2. Create a date field and a hidden field. Name both fields and change the IDs to your preferred IDs:
{ visible: 'YOUR DATE FIELD NAME/ID', hidden: 'YOUR HIDDEN FIELD NAME/ID' },
3. Add the hidden field name to Jetformbuilder's post-submit action (content) to display the date format as DD/MM/YY.
4. Lastly, if you have more than one date field, you can add multiple date fields in the code like this:
{ visible: 'YOUR DATE FIELD NAME/ID', hidden: 'YOUR HIDDEN FIELD NAME/ID' },
{ visible: 'YOUR DATE FIELD NAME/ID', hidden: 'YOUR HIDDEN FIELD NAME/ID' },


________________________________________________________________________________

jQuery(document).ready(function($) {
    // Function to format date in d-m-Y format for the hidden field
    function formatDateForHiddenField(d) {
        var parts = d.split('-');
        return parts[2] + '-' + parts[1] + '-' + parts[0];
    }

    // Function to get the current date in yyyy-mm-dd format
    function getCurrentFormattedDate() {
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0');
        var yyyy = today.getFullYear();
        return yyyy + '-' + mm + '-' + dd;
    }

    // Array of date field names and corresponding hidden field names
    var fieldNames = [
        { visible: 'YOUR DATE FIELD NAME/ ID', hidden: 'YOUR HIDDEN FIELD NAME/ ID' },

        // Add more fields here as needed
    ];

    // Set the current date as value and placeholder for each date input field
    var currentDate = getCurrentFormattedDate();
    fieldNames.forEach(function(fields) {
        var dateInputSelector = 'input[name="' + fields.visible + '"].jet-form-builder__field.date-field';
        var hiddenInputSelector = 'input[name="' + fields.hidden + '"]';

        $(dateInputSelector).val(currentDate).attr('placeholder', currentDate);
        $(hiddenInputSelector).val(formatDateForHiddenField(currentDate)); // Set the initial hidden field value

        // Trigger the change event to simulate user selection
        $(dateInputSelector).trigger('change');

        // Bind the change event to update the hidden field
        $(document).on('change', dateInputSelector, function() {
            var originalDate = $(this).val();
            $(hiddenInputSelector).val(formatDateForHiddenField(originalDate));
        });
    });
});