如何在GridView :: widget过滤器文本框上添加日历图标?

时间:2019-10-17 05:35:00

标签: gridview yii2 widget

我想在GridView :: widget过滤器文本框中添加一个日历图标,如下图所示。我尝试了太多方法,但效果也不错。请也查看我的页面代码。

enter image description here

请参见上图,我要使“启动日期”过滤器文本框如图中所圈出的。请帮助我解决此问题。

请参阅我的查看页面代码。

<?php Pjax::begin(); ?>    
                <?= GridView::widget([
                        'dataProvider' => $dataProvider,
                        'filterModel' => $searchModel,
                        'columns' => [
                            [
                                'attribute' => 'entity_id',
                                'value' => function($model) {
                                    return $model->entity->title;
                                },
                            ],
                            'leave_title',
                            [
                                'attribute' => 'leave_configuration_id',
                                'value' => function($model) {
                                    return $model->leaveConfiguration->title;
                                },
                            ],
                            [
                                'attribute' => 'emp_type',
                                'filter' => \app\models\SbhrmEmployee::typeOptions(),
                                'value' => function($model) {
                                    return $model->getEmployeeType();
                                },
                            ],
                            [
                                'attribute' => 'launch_date',
                                //'template' => "{label}{input}<span class='glyphicon glyphicon-calendar form-control-feedback'></span>",
                                'value' => function($model) {
                                    return date('d M, Y',strtotime($model->launch_date));
                                },
                                'filter' => DatePicker::widget([
                                    'model' => $searchModel,
                                    'attribute' => 'launch_date',
                                    'options' => [
                                        'autocomplete' => 'off',
                                        'class' => 'form-control',
                                        'template' => "{label}{input}<span class='glyphicon glyphicon-calendar form-control-feedback'></span>"
                                    ],
                                    //'template' => "{label}{input}<span class='glyphicon glyphicon-calendar form-control-feedback'></span>",
                                    'clientOptions' => [
                                        'orientation' => 'bottom auto',
                                        "format" => "dd M, yyyy",
                                        "orientation" =>'bottom',
                                        "autoclose" => true, 
                                        "todayHighlight"=> true,
                                    ],
                                    'dateFormat' => 'php:d M, Y'
                                ]),
                            ],

                            ['class' => 'yii\grid\ActionColumn', 'header' => 'Actions'],
                        ],
                    ]); ?>
                <?php Pjax::end(); ?>

1 个答案:

答案 0 :(得分:0)

DateColumn: https://gist.github.com/uldisn/804f46a7a0f98a60c580d40526dfeae7

EaDtateRangePicker: https://gist.github.com/uldisn/ad1b6e234db2cb8df66072ccf8c4dd22

网格列

        [
            'class' => ThDateColumn::class,
            'attribute' => 'doc_date',
        ],

查询过滤: https://github.com/d3yii2/d3system/blob/master/yii2/db/D3ActiveQuery.php

搜索中:

$query->andFilterWhereDateRange('doc_date',$this->doc_date);