Question

我有一个带有日期选项字段的小部件，它在仪表板中正常工作，但在主题定制器上无法显示。

我在form（）方法中声明了这样的字段（日期选择器的一个输入字段，altField的另一个输入字段）：

$form .= '<span class="widget-field">';
$form .= sprintf(
        '<label for="%1$s">%2$s</label><input type="text" data-type="date" id="%1$s" name="%3$s" value="%4$s" class="date-picker widefat" >',
        $this->get_field_id( 'start-date-picker' ),
        __( 'From:', 'yosilosetheme' ),
        $this->get_field_name( 'start-date-picker' ),
        $start_v );

$form .= sprintf(
        '<input type="hidden" id="%1$s" name="%2$s" value="%3$s" class="realdata-date-picker widefat" >',
        $this->get_field_id( 'start-date' ),
        $this->get_field_name( 'start-date' ),
        $instance['start-date'] );
    $form .= '</span>';

在＆＃39; admin_enqueue_scripts＆＃34;我将jquery-datepicker排队并使用以下方式获取样式：

wp_register_style('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');
wp_enqueue_style( 'jquery-ui' );

和

wp_register_script( $this->_token . '-settings', esc_url( $this->assets_url ) . 'js/settings.js', array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ), $this->_version );
wp_enqueue_script( $this->_token . '-settings' );

settings.js认为这是为了查找datepicker字段并激活它们：

$('body').on('focus', ".date-picker", function () {
    $(this).datepicker(
        $.extend({
                altField: $(this).parent().find('.realdata-date-picker'),
                altFormat: 'yymmdd'
            },
            $.datepicker.regional['es'])
    );
});

同样，所有单词都完美且正如预期的在仪表板上，但它不会在主题定制器中显示日历。我看到正在加载所有适当的文件（jquery，jquery-ui styles，datepicker.js等）;在调试器上我可以看到，当关注这些字段时，它会触发datepicker（）调用......但仍然没有。

有人知道发生了什么？（Wordpress 4.1）

Answer 1

问题是WP主题定制器有一个疯狂的z-index为500000，而datepicker弹出窗口的每个调用动态设置z-index相对于它的输入。

结束添加：

.wp-customizer div.ui-datepicker {
    z-index: 500001 !important;

}

我的css和问题解决了。

wordpress：datepicker适用于小部件选项页面，但不适用于定制程序

1 个答案: