Wordpress 插件在管理员中需要 Jquery Datepicker 和 Timepicker

Question

开发一个简单的插件，将几个自定义字段添加到自定义帖子数据类型。该字段是一个 JQuery 时间选择器和日期选择器。我不知道问题出在哪里。这是我的函数和自定义字段。请指出我正确的方向，让我知道缺少什么或如何让它工作。

//FUNCTION TO ADD SCRIPTS TIMEPICKER JQUERY PLUGIN
function tek_tour_script(){
    ?>
<script>
JQuery('#slider_example_1').timepicker({
    hourGrid : 4,
    minuteGrid : 10,
    timeFormat : 'hh:mm tt'
});

JQuery(document).ready(function() {
    JQuery('#MyDate').datepicker({
        dateFormat : 'dd-mm-yy'
    });
});

</script>
<?php
wp_register_script('tek_tour_timepicker', plugins_url('/js/jquery-ui-timepicker-addon.js', __FILE__));
wp_enqueue_script('tek_tour_timepicker', plugins_url('/js/jquery-ui-timepicker-addon.js', dirname(__FILE__)));

wp_register_script('tek_tour_sliderAccess', plugins_url('/js/jquery-ui-sliderAccess.js', __FILE__));
wp_enqueue_script('tek_tour_sliderAccess', plugins_url('/js/jquery-ui-sliderAccess.js', dirname(__FILE__)));

wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
}
add_action( 'admin_enqueue_scripts', 'tek_tour_script' );

这是我的 div：

 <h3>Times</h3>
<br>
<div>
<input type="text" name="slider_example_1" id="slider_example_1" value="" />
<input type="text" id="MyDate" name="MyDate" value=""/>
</div>

这是我的 CSS：

function tek_tour_time_css(){
?>
<style>
.ui-timepicker-div .ui-widget-header {
    margin-bottom: 8px;
}
.ui-timepicker-div dl {
    text-align: left;
}
.ui-timepicker-div dl dt {
    float: left;
    clear: left;
    padding: 0 0 0 5px;
}
.ui-timepicker-div dl dd {
    margin: 0 10px 10px 45%;
}
.ui-timepicker-div td {
    font-size: 90%;
}
.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}
.ui-timepicker-rtl {
    direction: rtl;
}
.ui-timepicker-rtl dl {
    text-align: right;
    padding: 0 5px 0 0;
}
.ui-timepicker-rtl dl dt {
    float: right;
    clear: right;
}
.ui-timepicker-rtl dl dd {
    margin: 0 45% 10px 10px;
}
 </style>
 <?php
 }
 add_action( 'admin_enqueue_scripts','tek_tour_time_css');

谢谢！！

Answer 1

你的jQuery代码不正确，timepicker需要在jQuery(document).ready()里面，

jQuery(document).ready(function() {
    jQuery('#MyDate').datepicker({
        dateFormat : 'dd-mm-yy'
    });
    jQuery('#slider_example_1').timepicker({
        hourGrid : 4,
        minuteGrid : 10,
        timeFormat : 'hh:mm tt'
    });
});

您还需要为它创建一个 JS 文件并将其加入队列，因为直接在“admin_enqueue_scripts”或“enqueue_scripts”操作中回显它会出错，因为 jQuery 到那时还没有加载到 WordPress 中。

您还应该使用 jQuery 库添加 JS 代码的依赖项。还要指定其他库的依赖关系，以确保它们在 jQuery 库之后加载。

最好将所有 CSS 和 JS 添加为单独的文件，并分别使用 wp_enqueue_style() 和 wp_enqueue_script() 将它们排入队列，而不是直接回显或打印它们。

例子：

wp_register_script('tek_tour_sliderAccess', plugins_url('/js/jquery-ui-sliderAccess.js', __FILE__), array( 'jquery' ));
wp_enqueue_script('tek_tour_sliderAccess');

参考： Wordpress Codex wp_enqueue_script() - Script Dependency