jQuery UI 时间选择器答案

【问题标题】：jQuery UI TimepickerjQuery UI 时间选择器
【发布时间】：2013-02-27 02:37:54
【问题描述】：

我正在尝试将 jQuery UI timepicker addon 添加到我的 datepicker 函数中。这些正在我的 Wordpress 安装的管理部分中加载。

脚本和样式表正在加载到标题中。我的问题是 timepicker 函数没有初始化。

日期选择器在点击时显示良好。我是不是弄乱了这里的语法？

function my_admin_init() {
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker', get_stylesheet_directory() . 'js/jquery-ui-1.10.1.custom.min.js', array('jquery', 'jquery-ui-core') );
wp_enqueue_script('jquery-ui-datetimepicker', get_stylesheet_directory() . 'js/timepicker.js', array('jquery', 'jquery-ui-core') );
wp_enqueue_style('jquery.ui.theme', get_stylesheet_directory_uri() . '/css/jquery-ui-1.10.1.custom.min.css');
wp_enqueue_style('jquery.timepicker.theme', get_stylesheet_directory_uri() . '/css/timepicker.css');
}
add_action('admin_init', 'my_admin_init');

function my_admin_footer() {
?>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#pyre_open').datepicker({
        dateFormat : 'DD, d MM, yy'
    });
    jQuery('#pyre_open').datetimepicker();
});
</script>
<?php
}
add_action('admin_footer', 'my_admin_footer');

【问题讨论】：

标签： jquery wordpress jquery-ui jquery-ui-datepicker

【解决方案1】：

我知道这是一篇旧帖子，但也许其他人遇到了这个问题。

首先，您没有正确初始化库。不需要为 datetimepicker 排入完整的 jquery-ui-core 队列。在我的 functions.php 中，代码如下所示：

wp_register_script( "timepicker", get_stylesheet_directory_uri().'/pathTo/jquery-ui-timepicker-addon.min.js', array( 'jquery', 'jquery-ui-datepicker', 'jquery-ui-slider' ), false, true );
...

//and later
wp_enqueue_script( 'timepicker' );
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_enqueue_script( 'jquery-ui-spinner' );

在 wp_register_script 中，我们将包含的 jquery-ui 类引用到 datetimepicker - 请参阅此处以获取完整列表 Wordpress Reference/wp register script

第二个你的 datetimepicker 不起作用，因为调用 datetimpicker 时，datepicker 已加载并显示在 #pyre_open 上。删除以下行应该可以解决问题，或者为时间/日期选择器选择另一个 html 元素。

jQuery('#pyre_open').datepicker({
    dateFormat : 'DD, d MM, yy'
});

【讨论】：