Can’t add class to forminator datepicker using JavaScript

Hi @svenratkajec,

Trust you are doing good and thank you for reaching out to us.

I have pinged our developers to check if a workaround could be suggested for this and we’ll update you here once we have feedback on this as soon as possible.

Kind Regards,
Nebu John

Hi @svenratkajec,

Please try the following code snippet, I hope that helps.

add_action( 'wp_footer', 'wpmudev_add_class_datepicker' , 9999 );
function wpmudev_add_class_datepicker() {
    global $post;
	if ( is_a( $post, 'WP_Post' ) && ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
		return;
	}
	?>
	<script type="text/javascript">
	jQuery( document ).ready( function($) {
		setTimeout(function() {
			$('.forminator-custom-form').trigger('after.load.forminator');
		},100);

		$(document).on('after.load.forminator', function(e, form_id) {
            $('#date-1 input').on('focus', function(){
                setTimeout(function(){
                    if ( !$('.ui-datepicker-today').hasClass('disabledToday') ) {
                        $('.ui-datepicker-today').addClass('disabledToday');
                    }
                },100);
            });
        });
    });
    </script>
    <?php
}

Please feel free to get back to us if you need any further clarification.

Kind Regards,
Nebu John

@wpmudevsupport14

• This reply was modified 1 year, 6 months ago by svenratkajec.

Hello @wpmudevsupport14,

I tried this code using “Custom CSS and JS” plugin and it doesn’t work…

jQuery(document).ready(function( $ ){
    setTimeout(function() {
			$('.forminator-custom-form-8839').trigger('after.load.forminator');
		},100);

		$(document).on('after.load.forminator', function(e, form_id) {
            $('#forminator-field-date-1-picker_646a28aaca909 input').on('focus', function(){
                setTimeout(function(){
                    if ($('.ui-datepicker-today').hasClass('disabledDate') ) {
                        $('.ui-datepicker-today').addClass('disabledToday');
                    }
                },100);
            });
        });
});

Hi @svenratkajec

I tested this code and it work fine for me but in a bit different way:

1. first, make sure that the number in this line (8839 in the code that you shared) is the same as ID of your form in question (form ID is number that you see in form’s shortcode)

$('.forminator-custom-form-8839').trigger('after.load.forminator');

2. second, edit your form and in datepicker field go to “Styling” settings and put a custom class name there; I just used (note no dot in front!)

mydatepicker

https://app.screencast.com/oJj0Lp9rs5qPO

3. in this line of code

$(‘#forminator-field-date-1-picker_646a28aaca909 input’).on(‘focus’, function(){

replace the ID with class; sticking to my example class, the line should become

$('.mydatepicker input').on('focus', function(){

4. and finally, add all to the site as MU plugin, like this:

– create an empty file with a .php extension (e.g. forminator-custom-datepicker-class.php)
– copy and paste this code into it

<?php 

add_action( 'wp_footer', 'my_custom_code', 99 );
function my_custom_code() {
	?>
	
	<script type="text/javascript">
jQuery(document).ready(function( $ ){
    setTimeout(function() {
			$('.forminator-custom-form-8839').trigger('after.load.forminator');
		},100);

		$(document).on('after.load.forminator', function(e, form_id) {
            $('.mydatepicker input').on('focus', function(){
                setTimeout(function(){
                    if ($('.ui-datepicker-today').hasClass('disabledDate') ) {
                        $('.ui-datepicker-today').addClass('disabledToday');
                    }
                },100);
            });
        });
});
	</script>
	
	<?php 
	
}

– make changes described above
– save the file and upload it to the “/wp-content/mu-plugins” folder of your site’s WordPress installation

Note: I’m not sure if this is your goal (we based responses on the code that you shared initially) but note that this code will add your custom class only to “today” date and only if it already is set to be disabled in the “disabled dates” settings of the field;

If you need it to add the class to some other days, please explain your goal a bit more and we’ll see if/how to modify the code for that.

Best regards,
Adam

Brilliant and detailed support team!
Thanks for the help, it works.