Date picker, bars if someone types in the date? [RESOLVED]

Get Help
, ,
1

Good morning, is it possible to insert the forward slash automatically if someone enters the date??? like example if someone writes 12122000 the system will have to automatically write 12/12/2000

Thank you

2

Hi Carlo,

If you prefer to add a date format wherever someone types in the input field, you will have to use jQuery code. However, for front-end validation, it is not possible to ensure that the visitor inserts a valid date.

If you would like to obtain this information in the backend after someone submits the form, you can use the merge tag (modifier).

// input
{date_updated:format:m/d/Y}

// output
04/21/2021

You can find more details here:

Is there anything else I can help you? :smile:

1 Like
3

ok thanks I put this jquery code in the functions file?

4

I haven’t provided any jQuery code yet. Have you tried the merge tag I shared? If you have and still need to make modifications on the frontend, please share the exact webpage URL where I can find the form to create a customized code. Thank you.

5

I’m sorry but it’s all on an internal server and platform and it’s not accessible from the internet.

Should I put this unions tag in the fuctions.php file?

// input
{date_updated:format:m/d/Y}

// output
04/21/2021
6

Hi Carlo,

I understand your point now. There is no need to use a merge tag if you are using a Date field. The following JavaScript code will automatically format the plain number from 12122000 to 12/12/2000, and it will be automatically stored in the entries in the same format.

jQuery(document).ready(function( $ ){
    $('.datepicker').on('input', function() {
        var inputValue = $(this).val();
        
        if (inputValue.length === 8) {
            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);
        }
    });
    
    $('.datepicker').on('blur', function() {
        var inputValue = $(this).val();
        var month = inputValue.substring(0, 2);
        
        if (parseInt(month) > 12) {
            $(this).css('border', '2px solid red');
        } else {
            $(this).css('border', '');
        }
    });
});

You can add this JavaScript code to your child theme’s JS file or use the “Simple Custom CSS and JS” plugin to add the code without needing a child theme. If you opt for the plugin, the configuration will resemble the screenshot below.

Plugin Config
Plugin Config1920Ă—968 111 KB

Final preview:

Give it a try, and let me know how that goes! :smile:

1 Like
7

Very goood

thanks I tried and it’s fine except that this code is for m/d/yyy and I would like to change it for d/m/yyy Thank you

8

You’re welcome, Carlo.

You can change the date format from the formattedDate variable below. Here is the modified code; you can simply copy and paste it to make it work. Thank you.

jQuery(document).ready(function($) {
    $('.datepicker').on('input', function() {
        var inputValue = $(this).val();
        
        if (inputValue.length === 8) {
            var date = inputValue.substring(0, 2);
            var month = inputValue.substring(2, 4);
            var year = inputValue.substring(4, 8);
            
            if (parseInt(month) > 12) {
                $(this).css('border', '2px solid red');
                return;
            }
            
            var formattedDate = date + '/' + month + '/' + year; // make changes here to change date format
            $(this).val(formattedDate);
        }
    });
    
    $('.datepicker').on('blur', function() {
        var inputValue = $(this).val();
        var month = inputValue.substring(3, 5);
        
        if (parseInt(month) > 12) {
            $(this).css('border', '2px solid red');
        } else {
            $(this).css('border', ''); 
        }
    });
});
2 Likes
9

Veryyy goooodddd solution Thank You

1 Like