Bootstrap Datepicker JS error $ is not function

  • Hello,

    I downloaded some scripts for Bootstrap Datepicker but when i implemented scripts into wordpress its doesnt work. Console said me: Uncaught TypeError: $ is not a function.

    function.php

    /* LOAD THEME STYLES AND JS */
function bootstrap_load_styles_css() {
    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'style_css', get_template_directory_uri() . '/moje.css' );
    wp_enqueue_style( 'fontawesome_css', get_template_directory_uri() . '/css/font-awesome.min.css' );
    wp_enqueue_style( 'calendar_css', get_template_directory_uri() . '/css/bootstrap-datepicker3.min.css' );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_load_styles_css' );

/* bootstrap jquery load */
function bootstrap_scripts_with_jquery()
{
	// Register the script like this for a theme:
    wp_register_script( 'calendar-script', get_template_directory_uri() . '/js/bootstrap-datepicker.min.js', array( 'jquery' ) );
	wp_register_script( 'custom-script', get_template_directory_uri() . '/js/bootstrap.min.js');
    wp_register_script( 'calendarsk-script', get_template_directory_uri() . '/js/bootstrap-datepicker.sk.min.js');
    
	// For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'calendar-script' );
    wp_enqueue_script( 'custom-script' );
    wp_enqueue_script( 'calendarsk-script' );
    
}
add_action( 'wp_enqueue_scripts', 'bootstrap_scripts_with_jquery' );

    and JS in shortcode

    <script type="text/javascript">
		$(document).ready(function() {
    	$('.datepicker').datepicker();
		})
	</script>

    Can you someone help me pls? Thanks for your time

Viewing 1 replies (of 1 total)

  • Hi there!

    Sorry you are having this problem. After I did some digging I found This Post which describes a similar problem.

    It says:

    WordPress loads jQuery in a ‘no-conflicts’ mode to significantly reduce the likelihood of it conflicting with other third party libraries that a owner may install on their blog/site….
    In ‘no conflict’ mode the $ shortcut is disabled, so you must replace it with the word ‘jQuery’ (notice the capitalised Q).
    So if you had a piece of script such as:

    $(document).ready(function() {
     $(".someClass").hide();
     $("#elementID .anotherClass").eq(2).show();
     ...
}

    You’d replace all the dollar symbols with the string ‘jQuery’.

    jQuery(document).ready(function() {
     jQuery(".someClass").hide();
     jQuery("#elementID .anotherClass").eq(2).show();
     ...
}

    I hope this helps you resolve the error!

    Best of Luck!

    ~Josh

Viewing 1 replies (of 1 total)
  • The topic ‘Bootstrap Datepicker JS error $ is not function’ is closed to new replies.