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

您所指的帖子正在使用jQueryUI，并且您正在尝试将该解决方案与使用Bootstrap Datepicker的kartik\date\DatePicker配合使用。因此，在使用任何yii扩展名时，请务必仔细阅读文档或指南。

现在要使其正常工作，您可以使用yii\jui\DatePicker。最新的jui日期选择器不再具有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如何选择点击日期的整周

1 个答案: