Question

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

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

这是我如何添加datepicker：

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

Answer 1

我找到了解决方法，我不确定它是否是最好的，但它对我有用。我将datepicker脚本移动到生成窗体小部件窗体的函数内的窗口小部件类。这样，datepicker只在小部件页面上初始化。

然后我调用onclick事件以在每次单击该字段时弹出datepicker，并且为了防止它在第一次单击该字段时未显示，我添加了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

  }

}

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

1 个答案: