Javascript 在 wordpress 中使用 jquery datepicker

Use jquery datepicker in wordpress

提问by testermaster

I want datepicker to who in a form in my wordpress template page, but it doesn't work.

我想要日期选择器在我的 wordpress 模板页面中的表单中显示，但它不起作用。

This is the code I've the child theme functions.php:

这是我有子主题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');

Then I've this in page-mypage.php:

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

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

But it doesn't show. Could you help me to wind what's wrong?

但它不显示。你能帮我吹一下有什么问题吗？

回答by Nathan Dawson

The code you're using to load jQuery is invalid and you aren't loading datepicker (jQuery UI Datepicker) at all. I've posted a few answers regarding the correct way to use jQuery in WordPress so I'll provide a working example and then a link if you'd like to read more.

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

Replace the code you've inserted into your child theme functions.php with:

将您插入到子主题 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' );

Finally replace your usage with:

最后将您的用法替换为：

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

jquery requires the word Jquery instead of $

jquery 需要单词 Jquery 而不是 $

回答by csehasib

For loading bellows script & style add bellows code on theme functions.php file.

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

Script for front-end use

前端使用的脚本

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

Script for back-end use

后台使用脚本

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

Just put this code also funtions.php file or bellow those code.

只需将此代码也放在 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');
?>

After adding this code, you'll got a date picker on Admin Menu->Settigns->Date Picker.

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

Please see details on Add a jQuery DatePicker to WordPress Theme or Plugin

请参阅将 jQuery DatePicker 添加到 WordPress 主题或插件的详细信息