Wordpress 小部件 jquery datepicker 在小部件保存时消失答案

【问题标题】：Wordpress widget jquery datepicker disappears on widget saveWordpress 小部件 jquery datepicker 在小部件保存时消失
【发布时间】：2014-07-11 05:53:00
【问题描述】：

我在 wordpress 小部件上添加 jQuery datepicker，它工作正常，直到我保存小部件。保存小部件后，日期选择器不会再次弹出，直到我刷新小部件页面。

我没有收到任何控制台错误，检查元素后发现#ui-datepicker-div 设置为display:none;，并且在保存小部件后不会更改为display: block;，也不会更改日期选择器的位置。

这是我添加日期选择器的方法：

if( ! function_exists( 'jquery_date_picker' ) ){
  function jquery_date_picker() {
    wp_enqueue_script( 'jquery-ui-datepicker' );
    wp_enqueue_style('jquery-ui-css', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css');
  }
}

add_action( 'admin_enqueue_scripts', 'jquery_date_picker' );

if( ! function_exists( 'call_date_picker' ) ){
  function call_date_picker () {
    ?>
        <script>
        jQuery(document).ready(function(){
            jQuery('.datepicker').datepicker({ dateFormat: "dd-mm-yy" });
        });
        </script>
    <?php
  }
}

add_action('admin_footer', 'call_date_picker');

【问题讨论】：

admin_footer 正在全部打印在每个管理部分的管理员上，这可能会产生意想不到的后果...检查this solution 是否适用于您的问题。
@brasofilo 会检查和评论，谢谢！

标签： jquery jquery-ui-datepicker wordpress

【解决方案1】：

我找到了一个解决方案，我不确定它是否是最好的，但它对我有用。我将 datepicker 脚本移动到生成小部件表单的函数内的小部件类中。这样，日期选择器只会在小部件页面上初始化。

然后我调用一个 onclick 事件以在每次单击该字段时弹出日期选择器，并防止它在第一次单击该字段时不显示我添加了 datepicker('show') 方法。

class Alert_Widget extends WP_Widget {

  public function form( $instance ) {

    wp_enqueue_script( 'jquery-ui-datepicker' );
    wp_enqueue_style('jquery-ui-css', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css');
    ?>
        <script type="text/javascript">
        ( function($) {

            $('.datepicker').on('click', function() {
                $(this).datepicker({ dateFormat: "dd-mm-yy" });
                $(this).datepicker('show');
            });

        })(jQuery);
        </script>
    <?php

  }

}

【讨论】：