Yii2 kartik DatePicker 如何在点击日期选择整周

Question

我尝试使用 kartik datepicker 从 Yii2 上问题 DatePicker Week number column to be clickable on selecting week 的示例答案中移动此代码但在运行和选定的日期之后，通过单击

不会选择该周

<?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];
                    }
                '
            )

        ]
    ]
);

Answer 1

您所指的 post 正在使用 jQueryUI and you are trying to use that solution with kartik\date\DatePicker which uses 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();
            }"
        )
    ]

]);

Yii2 kartik DatePicker 如何在点击日期选择整周

Yii2 kartik DatePicker how to selected full week on click date

javascript

yii2

bootstrap-datepicker