Bootstrap Datepicker和TimePicker添加到WordPress主题时不起作用 [英] Bootstrap datepicker and timepicker not working when added to WordPress theme

问题描述

真的希望您能帮我解决这个问题，我迷路了……

Really hoping you can help me out with this one, I'm lost...

我添加了 bootstrap-datepicker.js 和 bootstrap-timepicker.js 到主题的js文件夹中，并将相关的css文件添加到css / bootstrap中

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.

我已经修改了functions.php以使脚本和样式表入队：

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');

对象正确显示，但是单击它们后什么也没有发生。我使用以下HTML（每个作者网站的示例代码）对其进行调用：

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> 

当我检查Chrome中的元素时，可以看到CSS在那里并且脚本存在资源>脚本部分。该网站上的所有其他内容都工作正常。

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.

推荐答案

问题是您要做的就是为datepicker创建标记和样式和时间选择器，您实际上并没有在输入中启用它们。

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.

使用jQuery，您可以使用以下JavaScript启用：

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

• http://jdewit.github.com/bootstrap-timepicker/


• http://www.eyecon.ro/ bootstrap-datepicker /

• http://jdewit.github.com/bootstrap-timepicker/
• http://www.eyecon.ro/bootstrap-datepicker/

这篇关于Bootstrap Datepicker和TimePicker添加到WordPress主题时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！