Prevent date input pop-up JS code

Hi all,

Is there any custom JS code which prevents that the Date selection Input is shown when a user hits the input a date field ? My users are over 60 years old, so it’s kind of annoying that they have to push the date fields several times just to come back to eg 1950 when selecting their birthdate. I just want to have the input like (dd/mm/yyyy) by typing and not by the selection button.

Hey @slimpens, yep! Here’s some JavaScript you can use.

TB.render('component_ID', function(data) {
	data.ele.find('.input-group-btn').remove();
});

Remember to change ‘component_ID’ to your Form Component’s ID

1 Like

If you’d like, you can also take this one step further and add an Input Mask.

See the following post for instructions on setting it up.

And this is how that would look and the code for a Date, Time, and Date/Time field
Feel free to play around with the form yourself by clicking here.
2022-10-21_03-51-49

TB.render('component_ID', function(data) {
	data.ele.find('.input-group-btn').remove();
	
	// Date Input
    data.ele.find('.date-input-mask input').inputmask({
        alias: 'datetime',
        inputFormat: "mm/dd/yyyy"
    });
    
    // Time Input
    data.ele.find('.time-input-mask input').inputmask({
        alias: 'datetime',
        inputFormat: "HH:MM TT"
    });
    
    // Date/Time Input
    data.ele.find('.datetime-input-mask input').inputmask({
        alias: 'datetime',
        inputFormat: "mm/dd/yyyy HH:MM TT"
    });
    
});
1 Like

This works great in a form, but it doesn’t seem to work with inline edit of a table. @Chem can you share any magic that might help?

For inline edits, can you please try adding the following to the CSS section of the page?

[ng-click="$ctrl.openCalendar($event)"]{
    display:none;
}

@Chem Sorry, I should been more specific. Is there a trick to geting the input mask working on inline edit fields for a table?

No worries! I was able to get this to work :slight_smile:

Here’s a video on how to set this up

And here’s the code


TB.render('component_ID', function(data) {
    data.ele.find('.date-column').click(function(){
        setTimeout(function(){
            $('.popover input').inputmask({
                alias: 'datetime',
                inputFormat: "mm/dd/yyyy"
            });
        },200);
    });
    data.ele.find('.time-column').click(function(){
        setTimeout(function(){
            $('.popover input').inputmask({
                alias: 'datetime',
                inputFormat: "HH:MM TT"
            });
        },200);
    });
    data.ele.find('.datetime-column').click(function(){
        setTimeout(function(){
            $('.popover input').inputmask({
                alias: 'datetime',
                inputFormat: "mm/dd/yyyy HH:MM TT"
            });
        },200);
    });
});
2 Likes

exactly what I needed, thanks.

1 Like

What about masking the instructions in the address fields? I would like to hide them all together.

image

Hey @ChTim you may add a CSS class to the Address field called “address-field” like so

And then add the following JavaScript to the page (remember to change component_ID to your components ID)

TB.render('component_ID', function(data) {
	data.ele.find('.address-field input').attr('placeholder','');
});

Which should give you the following result

Thanks @Chem! Worked perfectly.

1 Like