Gridview 筛选搜索框中的日期选择器

我在视图中使用了bootstrap.widgets.TbGridView 以下是相同项目的屏幕截图：-

我想在我的日期筛选器中使用DatePicker。 请帮助我如何放置此>

以下是我的代码：-

$this->widget('bootstrap.widgets.TbGridView', array(
    'dataProvider'=>$model->search(),
    'filter'=>$model,
    'type'=>'striped bordered condensed',
    'pager' => array('htmlOptions'=>array('class'=>'pager',
                                            'maxButtonCount' => 3)), // set whatever css class you want
    'columns'=>array(
            array(
                    'header'=>'Type',
                    'name'=>'sparktype_id',
                    'value'=>'sparktype::itemssparktypesname($data->sparktype_id)',

            ),
        array(
            'header'=>'Headline',
            'name'=>'headline',
            'type'=>'raw',
            'value'=>'CHtml::link(CHtml::encode($data->headline), $data->url)',

        ),
        array(
                    'header'=>'Date',
                    'name'=>'added_date',
                    'type'=>'date',
                    'value'=>'$data->added_date',
            ),
            array(
                    'header'=>'State',
                    'name'=>'statemetro_id',                'value'=>'statemetro::itemstateforspark($data->sparkdetails[0]->statemetro_id)',
                    'type'=>'raw',

            ),array('class'=>'CButtonColumn',
            'deleteConfirmation'=>'Are you sure you want to delete this Spark ?',
            'htmlOptions'=>array('width'=>70),

    ),
),

---

)

您可以实现如下日期选择器：-

$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider' => $model->search(),
    'filter' => $model,
    'afterAjaxUpdate' => 'reinstallDatePicker',
    'columns' => array(
    ...
        array(
            'header'=>'Date',
            'name'=>'added_date',
            'filter' => array(
                'model' => $model,
                'attribute' => 'added_date',
                'htmlOptions' => array(
                    'id' => 'datepicker_for_added_date',
                    'size' => '10',
                ),
                'defaultOptions' => array(
                    'shownOn' => 'focus',
                    'dateFormat' => 'yy-mm-dd', //Change your date format accordingly
                    //These are normal DatePicker options, omit unnecessary ones
                    'showOtherMonths' => true,
                    'selectOtherMonths' => true,
                    'changeMonth' => true,
                    'changeYear' => true,
                    'showButtonPanel' => true,
                ),
            ),
        ),
    ...

在此之后，请在您的网页中编写以下代码：-

Yii::app()->clientScript->registerScript('re-install-date-picker', "
    function reinstallDatePicker(id, data) {
        $('#datepicker_for_added_date').datepicker();
    }
");

有关参考信息，请参阅本页：-