Question

我尝试将DataTimePickier添加到我的插件中。 DataPicker工作得很好，但DataTimePicker根本不想工作。我点击输入，没有任何反应。

在普通的.php文件中，DataTimePicker工作正常，我包括：

  <link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
</head>
<body>

            <input type="text" class="datepicker"/>

<!--loading jQuery and other library-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="script.js"></script>

在WordPress插件文件中，我尝试包含与普通.php文件相同的文件：

 function add_datapicker()
{

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-datepicker' );
    wp_enqueue_script( 'jquery-ui-slider' );

    wp_register_script('add_time', plugins_url('/jquery-ui-timepicker-addon.js', __FILE__));

    wp_register_script('add_datatime', plugins_url('/jquery-ui-sliderAccess.js', __FILE__));
    wp_register_script('add_script', plugins_url('/script.js', __FILE__));

    wp_enqueue_style('jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');

    wp_enqueue_script( 'add_datatime' );
    wp_enqueue_script( 'add_time' );
    wp_enqueue_script( 'add_script' );

}
add_action( 'wp_enqueue_scripts', 'add_datapicker' );
add_action( 'admin_enqueue_scripts', 'add_datapicker' );

在普通的DataPicker中（没有时间）我已经包含了类似下面的代码：

    function myplugin_add_datapicker() {

        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'jquery-ui-datepicker' );
        wp_register_script('add_data', plugins_url('/js/datepicker.js', __FILE__));

        wp_enqueue_style('jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');

        wp_enqueue_script( 'add_data' );

    }
add_action( 'wp_enqueue_scripts', 'myplugin_add_datapicker' );
add_action( 'admin_enqueue_scripts', 'myplugin_add_datapicker' );

它完美无缺。那么，哪里出错了？

Script.cs与datapicker.js是同一个文件。内容如下：

$(function()
{
    $('.datepicker').datetimepicker(
        {
            timeFormat: "HH:mm:ss",
            stepHour: 1,
            stepMinute: 1,
            stepSecond: 1,
            timeText: 'Czas',
            hourText: 'Godziny',
            minuteText: 'Minuty',
            secondText: 'Sekundy',
            currentText: 'Aktualny czas',
            closeText: 'Gotowe'
        });

    jQuery(function($){
        $.datepicker.regional['pl'] = {
            closeText: 'Zamknij',
            prevText: '<Poprzedni',
            nextText: 'Następny>',
            currentText: 'Dziś',
            monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec',
                'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
            monthNamesShort: ['Sty','Lu','Mar','Kw','Maj','Cze',
                'Lip','Sie','Wrz','Pa','Lis','Gru'],
            dayNames: ['Niedziela','Poniedziałek','Wtorek','Środa','Czwartek','Piątek','Sobota'],
            dayNamesShort: ['Nie','Pn','Wt','Śr','Czw','Pt','So'],
            dayNamesMin: ['N','Pn','Wt','Śr','Cz','Pt','So'],
            weekHeader: 'Tydz',
            dateFormat: 'yy-mm-dd',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: ''};

        $.datepicker.setDefaults($.datepicker.regional['pl']);

    });


});

感谢您的帮助。

Answer 1

我可以看到几个问题。首先，您使用'init'而不是'wp_enqueue_scripts'的错误操作调用来包含脚本。另一个较小的一点是，最好使用插件的唯一标识符字符串为所有函数调用添加前缀，这样您就不会覆盖其他一些插件函数。您的添加操作调用应该如下所示......

add_action( 'wp_enqueue_scripts', 'myplugin_add_datapicker' );
add_action( 'admin_enqueue_scripts', 'myplugin_add_datapicker' );

（将myplugin替换为适用于您的插件的任何内容，我通常使用3个字母的标识符，例如hhf_add_datepicker）

您的下一个问题（可能是主要问题）是您在注册脚本时未包含任何依赖项。由于datepicker.js（我认为）依赖jquery-ui-datepicker，你需要告诉wordpress。例如...

wp_register_script( 'datepicker', plugin_dir_url( __FILE__ ) . '/file/path.js', 'jquery-ui-datepicker' );

您可以在wordpress codex中找到有关如何将脚本排入队列的更多信息。您的代码中也存在一些拼写错误和错误，缺少分号并且不确定您链接到哪个文件路径但它看起来并不正确。假设您的datepicker.js文件位于名为＆＃39; js＆＃39;的目录中在你的插件目录中，你的代码应该是这样的......

function myplugin_add_datapicker() {

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-datepicker' );
    wp_register_script('timepicker', plugins_url( __FILE__ ) . '/js/jquery-ui-timepicker-addon.js', 'jquery');
    wp_register_script( 'datepicker', plugin_dir_url( __FILE__ ) . '/js/datepicker.js', 'jquery-ui-datepicker' );

    wp_enqueue_style('jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');

    wp_enqueue_script( 'timepicker' );
    wp_enqueue_script( 'datepicker' );

}

add_action( 'wp_enqueue_scripts', 'myplugin_add_datapicker' );
add_action( 'admin_enqueue_scripts', 'myplugin_add_datapicker' );

您可能想要解决的最后一件事是您没有使用任何条件逻辑来告诉Wordpress何时专门将您的脚本排入队列。目前，Wordpress会将所有脚本添加到管理区域内外的每个页面，无论他们是否需要，都会导致更高的冲突和更慢的页面加载。

我希望有帮助

此致

丹

在Wordpress插件中包含文件DateTimePicker

1 个答案: