Yii2 kartik DatePicker как выбрать целую неделю по дате клика - PullRequest
Новая
       45

Yii2 kartik DatePicker как выбрать целую неделю по дате клика

0 голосов
/ 05 июля 2019

Я пытался переместить этот код из примера ответа на вопрос Столбец номера недели DatePicker, чтобы можно было нажимать при выборе недели в Yii2 с помощью kartik datepicker, но после запуска и выбранной даты неделя не выбирается нажатием 

<?php
use kartik\date\DatePicker;
use yii\web\JsExpression;

$this->registerJs(
    <<<JS
$(function(){
   var startDate;
   var endDate;

   var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.datepicker').find('.ui-datepicker-current-day a').addClass('ui-state-active')

        }, 1);
    }
});
JS
);

echo DatePicker::widget(
    [
        'model' => $searchModel,
        'attribute' => 'period_start',
        'language' => 'en',
        'class' => 'datepicker',
        'type' => DatePicker::TYPE_INPUT,
        'pluginOptions' => [
            'calendarWeeks' => true,
            'autoclose' => true,
            'format' => 'yyyy-mm-dd',
            'updateViewDate' => false,
            'onSelect' => new JsExpression(
                'function(dateText, inst) {
                        var date = $(this).datepicker(\'getDate\');
                        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
                        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                        var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
                        $(\'#startDate\').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
                        $(\'#endDate\').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));

                        selectCurrentWeek();
                        }
                '
            ),
            'beforeShowDay' => new JsExpression(
                'function (date) {
                        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
                        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                        var cssClass = \'\';
                        if(date >= startDate && date <= endDate)
                        cssClass = \'ui-datepicker-current-day\';
                        return [true, cssClass];
                    }
                '
            )

        ]
    ]
);

1 Ответ

1 голос
/ 07 июля 2019

В сообщении, на которое вы ссылаетесь, используется jQueryUI , и вы пытаетесь использовать это решение с kartik\date\DatePicker, в котором используется Bootstrap Datepicker .Поэтому вы должны быть осторожны при использовании любого расширения yii, изучая документы или руководство.

Теперь, чтобы заставить его работать, вы можете использовать yii \ jui \ DatePicker .jui datepicker больше не имеет опции autoclose и предоставляет вам опцию inline, которая отображает встроенный указатель даты и скрывает поле.

Я воспроизведу тот же пример, на который вы ссылались, и вы увидите всю выбранную неделю 

<?php
use yii\helpers\Html;
// use kartik\date\DatePicker;
use yii\jui\DatePicker;
use yii\web\JsExpression;

$this->registerJs(
    <<<JS

   var startDate;
   var endDate;

   var selectCurrentWeek = function() {
        window.setTimeout(function () {
            console.log('called');
            $('.hasDatepicker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }

JS
);
echo DatePicker::widget([
    'model' => $searchModel,
    'attribute' => 'period_start',
    'inline' => true,
    'clientOptions' => [
        'selectOtherMonths' => true,
        'onSelect' => new JsExpression(
            "function(dateText, inst) {
                var date = $(this).datepicker('getDate');
                startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
                endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
                selectCurrentWeek();
            }"
        ),
        'beforeShowDay' => new JsExpression(
            "function(date) {
                    var cssClass = '';
                    if(date >= startDate && date <= endDate)
                        cssClass = 'ui-datepicker-current-day';
                    return [true, cssClass];
                }"
        ),
        'onChangeMonthYear' => new JsExpression(
            "function(year, month, inst) {
                selectCurrentWeek();
            }"
        )
    ]

]);
...