Auto Validate Typed Date From Datepicker

Typing the date in both Gravity Forms and Formidable Forms currently does not trigger any action. Enhancing the user experience could be achieved by implementing a function that validate typed date like 12132014 to 12/13/2014. This code snippet is designed to convert dates into the desired format, benefiting the user experience for both Gravity Forms and Formidable Forms.

jQuery(document).ready(function( $ ){
    $('.datepicker').on('input', function() {
        var inputValue = $(this).val();
        
        if (/^\d{8}$/.test(inputValue)) {
            var month = inputValue.substring(0, 2);
            var date = inputValue.substring(2, 4);
            var year = inputValue.substring(4, 8);
            
            if (parseInt(month) > 12) {
                $(this).css('border', '2px solid red');
                return;
            } else {
                $(this).css('border', '');
            }
            
            var formattedDate = month + '/' + date + '/' + year;
            $(this).val(formattedDate);
        } else {
            $(this).css('border', '');
        }
    });
    
    $('.datepicker').on('blur', function() {
        var inputValue = $(this).val();
        var month = inputValue.substring(0, 2);
        
        if (/^\d{8}$/.test(inputValue) && parseInt(month) > 12) {
            $(this).css('border', '2px solid red');
        } else {
            $(this).css('border', '');
        }
    });
});

jQuery(document).ready(function( $ ){
    $('.frm_date').on('input', function() {
        var inputValue = $(this).val();
        
        if (/^\d{8}$/.test(inputValue)) {
            var month = inputValue.substring(0, 2);
            var date = inputValue.substring(2, 4);
            var year = inputValue.substring(4, 8);
            
            if (parseInt(month) > 12) {
                $(this).css('border', '2px solid red');
                return;
            } else {
                $(this).css('border', '');
            }
            
            var formattedDate = month + '/' + date + '/' + year;
            $(this).val(formattedDate);
        } else {
            $(this).css('border', '');
        }
    });
    
    $('.datepicker').on('blur', function() {
        var inputValue = $(this).val();
        var month = inputValue.substring(0, 2);
        
        if (/^\d{8}$/.test(inputValue) && parseInt(month) > 12) {
            $(this).css('border', '2px solid red');
        } else {
            $(this).css('border', '');
        }
    });
});

Imagine you’re filling out a form online, and there’s a field asking for your birthdate. You start typing your birthdate in the familiar MMDDYYYY format. As you type, the website is keeping an eye on what you’re doing.

Now, here’s where the magic happens: the website checks what you’ve typed so far. It’s not just looking at the number of characters you’ve entered; it’s actually making sure those characters match the pattern for a birthdate, like two digits for the month, two for the day, and four for the year.

If you’ve typed exactly eight digits, and they match the expected pattern, the website steps in and formats your birthdate nicely with slashes, so it looks like MM/DD/YYYY. It’s like a little helper making sure your input is easy to read and understand.

But let’s say you decide to backtrack and delete a couple of digits. No worries! The website is smart enough not to mess with what you’re doing. It won’t add any extra slashes or change what you’ve typed unless it’s sure you’ve entered a complete, valid date again.

And here’s the cherry on top: if you finish typing your birthdate and move away from the field, the website gives you one final check. If everything looks good, the border around the input stays clear, showing you’re good to go. But if there’s an issue, like maybe you accidentally entered a month higher than 12, it gently lets you know with a red border, so you can fix it up easily.

Essentially, this code is like having a friendly guide by your side as you fill out the form, ensuring your birthdate is entered correctly without any hiccups.

If you ensure that the CSS selector of the datepicker field is correct, this code can work with any form. If your datepicker has a custom CSS class or ID, you can replace .frm_date or .datepicker with your own class. However, if the datepicker doesn’t have any CSS class, you can use the parent class and ensure to have an absolute selector there, such as .myClass input.