datepicker 适用于小部件选项页面，但不适用于定制器

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

在“admin_enqueue_scripts”中，我将 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 持有这个来查找日期选择器字段并激活它们：

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

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

（WordPress 4.1）

Answer 1

问题是 WP 主题定制器具有 500000 的疯狂 z-index，并且 datepicker 弹出窗口的 z-index 在每次调用时相对于其输入动态设置。

最后添加：

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

}

到我的 css 并解决问题。