Bootstrap datepicker and timepicker not working when added to WordPress theme

1 Views

Really hoping you can help me out with this one, I’m lost…

I’ve added bootstrap-datepicker.js and bootstrap-timepicker.js to the theme’s js folder and the relevant css files to the css/bootstrap folder.

Read More

I’ve modified functions.php to enqueue the scripts and stylesheets: 

wp_enqueue_script('bootstrap-js', get_template_directory_uri() .'/js/bootstrap.js');
wp_enqueue_script('bootstrap-datepicker', get_template_directory_uri() .'/js/bootstrap-datepicker.js');
wp_enqueue_script('bootstrap-fileupload', get_template_directory_uri() .'/js/bootstrap-fileupload.js');
wp_enqueue_script('bootstrap-timepicker', get_template_directory_uri() .'/js/bootstrap-timepicker.js');

wp_enqueue_style('bootstrap', get_template_directory_uri().'/css/bootstrap/bootstrap.css');
wp_enqueue_style('responsive', get_template_directory_uri().'/css/bootstrap/bootstrap-responsive.css');
wp_enqueue_style('bootstrap-datepicker', get_template_directory_uri().'/css/bootstrap/bootstrap-datepicker.css');
wp_enqueue_style('bootstrap-fileupload', get_template_directory_uri().'/css/bootstrap/bootstrap-fileupload.css');
wp_enqueue_style('bootstrap-timepicker', get_template_directory_uri().'/css/bootstrap/bootstrap-timepicker.css');

The objects display correctly, but nothing happens when they’re clicked. I’m calling them with the HTML below (the sample code from each author’s site): 

<div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
    <input class="span2" size="16" type="text" value="12-02-2012">
    <span class="add-on"><i class="icon-th"></i></span>
</div>

<div class="input-append bootstrap-timepicker-component">
    <input type="text" class="timepicker-default input-small">
    <span class="add-on">
        <i class="icon-time"></i>
    </span>
</div>

When I inspect the elements in Chrome, I can see the CSS is there and the scripts are present in the Resources > Scripts section. Everything else on the site works fine.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. The problem is all that you have done is create the markup and styling for the datepicker and timepicker, you haven’t actually enabled them on the inputs.

    Using jQuery you can use the following javascript to enable:

    $('.timepicker-default').timepicker(); // I would change the class, or maybe use an id
$('#datepicker').datepicker();

    You can see more options in the documentation