在yii中的pjax之后，datepicker的showButtonPanel属性不起作用

Question

我是Yii的新人。我添加了一个类，我正在加载一个具有showButtonPanel属性的日期选择器，它运行良好，但是当我点击重置网格或运行pjax代码时，datepicker运行良好，但不知何故，datepicker上的按钮不可见或者showButtonPanel属性没有不行。这是一个代码。

$(document).ready(function() {
    callDatePickers();
});

function callDatePickers() {
    $('.anyDayDatePicker').datepicker({
        autoclose: true,
        pickTime: false,
        dateFormat: 'dd-M-yy',
        defaultDate: new Date(),
        showButtonPanel : true,
        closeText: 'Clear',
        onClose: function () {
            var event = arguments.callee.caller.caller.arguments[0];
            if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
                $(this).val('');
            }
        }
    }).focus(function (input ) {
        console.log("Hello");
        $(input).datepicker('widget').find('.ui-datepicker-current').hide();
        $('.ui-datepicker-close').addClass('clear-date-btn');
    });
}

并在index.php中

<?php \yii\widgets\Pjax::begin(['enablePushState' => false, 'id' => 'ictmsTrialEventFrom', 'formSelector' => '#ictms-search-form']); ?>

<?=
    GridView::widget([
        'id' => 'crud-datatable',
         'dataProvider' => $dataProvider,
         'filterModel' => $searchModel,
          'pjax' => false,
          'columns' => require(__DIR__ . '/_columns.php'),
     ])       
 ?>
<?php \yii\widgets\Pjax::end() ?>

columns.php

[
        'class' => '\kartik\grid\DataColumn',
        'attribute' => 'actual_date',
        'width' => '15%',
        'value' => function($model) {
            if (isset($model['actual_date'])) {
                return date(Yii::$app->params['dateFormat'], strtotime($model['actual_date']));
            }
        },
        'filter' => \yii\jui\DatePicker::widget([
            'model' => $searchModel,
            'attribute' => 'actual_date',
            'language' => 'ru',
            'dateFormat' => 'dd-MM-yyyy',
            'options' => ['class' => 'anyDayDatePicker'],
        ]),
    ],

任何人都可以给我解决为什么showButtonPanel在pjax之后无法正常工作？提前致谢。

Answer 1

您应该在pjax:end事件上调用脚本，以便每当PJAX加载/重新加载完成将内容替换为页面时调用脚本

所以替换下面的代码

$(document).ready(function() {
    callDatePickers();
});

以下内容

$(document).on('ready pjax:end', function(event) {
  callDatePickers();
});