在 wordpress 中使用 jquery datepicker

Posted 2023-02-24

【中文标题】在 wordpress 中使用 jquery datepicker

【英文标题】：Use jquery datepicker in wordpress

【发布时间】：2015-02-12 07:20:26

【问题描述】：

我想在我的 wordpress 模板页面中以表单的形式将 datepicker 分配给谁，但它不起作用。

这是我有子主题functions.php的代码：

function modify_jquery() 
    if (!is_admin()) 
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', false, '2.1.1');
        wp_enqueue_script('jquery');
    

add_action('init', 'modify_jquery');
function load_jquery_ui_google_cdn() 
    global $wp_scripts;

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

    // get the jquery ui object
    $queryui = $wp_scripts->query('jquery-ui-core');

    // load the jquery ui theme
    $urlui = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js";
    wp_enqueue_style('jquery-ui-smoothness', $urlui, false, null);


add_action('wp_enqueue_scripts', 'load_jquery_ui_google_cdn');

然后我在 page-mypage.php 中有这个：

                <script>
  $(function() 
    $( "#datepicker" ).datepicker();
  );
                </script>
...other code...
Date: <input type="text" id="datepicker">
...other code...
        </form> 

但它没有显示。你能帮我解决一下有什么问题吗？

【问题讨论】：

你的 jQuery URL 看起来有问题（你有 ajax.googleapis.com/ajax.googleapis.com）。您是否在任何地方添加了datepicker()？我认为它是 jQuery UI 的一部分，而不是基础 jQuery

@Hobo 感谢您的回复，我已添加 jQueryi UI，如第一篇文章所示，但仍然无法正常工作，

在 WordPress 中使用“WP Datepicker”插件不是更好吗？

【参考方案1】：

您用于加载 jQuery 的代码无效，并且您根本没有加载 datepicker (jQuery UI Datepicker)。我已经发布了一些关于在 WordPress 中使用 jQuery 的正确方法的答案，因此如果您想了解更多信息，我将提供一个工作示例，然后提供一个链接。

将您插入子主题functions.php的代码替换为：

/**
 * Load jQuery datepicker.
 *
 * By using the correct hook you don't need to check `is_admin()` first.
 * If jQuery hasn't already been loaded it will be when we request the
 * datepicker script.
 */
function wpse_enqueue_datepicker() 
    // Load the datepicker script (pre-registered in WordPress).
    wp_enqueue_script( 'jquery-ui-datepicker' );

    // You need styling for the datepicker. For simplicity I've linked to the jQuery UI CSS on a CDN.
    wp_register_style( 'jquery-ui', 'https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css' );
    wp_enqueue_style( 'jquery-ui' );  

add_action( 'wp_enqueue_scripts', 'wpse_enqueue_datepicker' );

最后将你的用法替换为：

<script>
    jQuery(document).ready(function($) 
        $("#datepicker").datepicker();
    );
</script>

jquery requires the word Jquery instead of $

【讨论】：

它开始工作了，谢谢！现在我在透明背景上看到日历。如何拥有像这里的默认布局？ jqueryui.com/datepicker/#default

我已经继续并更新了我的答案以包含有关加载 jQuery UI 样式表的详细信息。

我已经测试了您的更新，清除了缓存，但仍然是透明背景。感谢您的耐心等待。

抱歉，我应该先检查 CSS 文件。请使用更新后的链接重试。

Google 托管主题也：ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/… 来自：developers.google.com/speed/libraries/#jquery-ui

【参考方案2】：

要加载波纹管脚本和样式，请在主题 functions.php 文件中添加波纹管代码。

前端使用脚本

function add_e2_date_picker()
//jQuery UI date picker file
wp_enqueue_script('jquery-ui-datepicker');
//jQuery UI theme css file
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);

add_action('wp_enqueue_scripts', 'add_e2_date_picker'); 

后端使用脚本

    function add_e2_date_picker()
    //jQuery UI date picker file
    wp_enqueue_script('jquery-ui-datepicker');
    //jQuery UI theme css file
    wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
    
    add_action('admin_enqueue_scripts', 'add_e2_date_picker'); 

只要把这段代码也放在 funtions.php 文件或下面这些代码。

function register_datepiker_submenu() 
    add_submenu_page( 'options-general.php', 'Date Picker', 'Date Picker', 'manage_options', 'date-picker', 'datepiker_submenu_callback' );


function datepiker_submenu_callback()  ?>

    <div class="wrap">

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

    </div>

    <script>
    jQuery(function() 
        jQuery( ".datepicker" ).datepicker(
            dateFormat : "dd-mm-yy"
        );
    );
    </script> 

<?php 
add_action('admin_menu', 'register_datepiker_submenu');
?>

添加此代码后，您将在 Admin Menu->Settigns->Date Picker 上获得一个日期选择器。

详情请见Add a jQuery DatePicker to WordPress Theme or Plugin