Yii2框架中如何使用Kartik日期时间选择器搜索GridView记录

我来帮你搞定这个需求，咱们分模型层、搜索模型层、视图层三步来实现：

1. 准备模型层（假设你的模型是YourModel.php） #

确保你的数据表有对应的时间字段（比如created_at、updated_at），模型里已经有对应的属性。如果是时间戳类型，记得在模型里设置safe规则以便接收搜索参数：

// YourModel.php
public function rules()
{
    return array_merge(parent::rules(), [
        // 假设你的时间字段是created_at，类型为datetime
        [['created_at'], 'safe'],
    ]);
}

2. 配置搜索模型（YourModelSearch.php） #

这是实现筛选的核心，需要添加两个用于接收时间范围的属性，并在搜索方法里加入查询条件：

// YourModelSearch.php
use yii\db\Expression;
use yii\data\ActiveDataProvider;

class YourModelSearch extends YourModel
{
    // 添加两个时间范围属性，用于接收前端选择的时间
    public $start_date;
    public $end_date;

    public function rules()
    {
        return array_merge(parent::rules(), [
            // 验证时间输入为安全值
            [['start_date', 'end_date'], 'safe'],
        ]);
    }

    public function search($params)
    {
        $query = YourModel::find();

        // 数据提供者配置
        $dataProvider = new ActiveDataProvider([
            'query' => $query,
        ]);

        $this->load($params);

        if (!$this->validate()) {
            return $dataProvider;
        }

        // 添加时间范围筛选条件
        if (!empty($this->start_date)) {
            $query->andWhere(['>=', 'created_at', $this->start_date]);
        }
        if (!empty($this->end_date)) {
            // 技巧：如果要包含结束日期的最后一秒，给结束时间补全时分秒
            $query->andWhere(['<=', 'created_at', $this->end_date . ' 23:59:59']);
            // 如果你用的是日期而非datetime类型，可以用DATE_ADD来包含当天所有数据：
            // $query->andWhere(['<=', 'created_at', new Expression("DATE_ADD(:end_date, INTERVAL 1 DAY)", [':end_date' => $this->end_date])]);
        }

        return $dataProvider;
    }
}

3. 视图层（index.php）完善DateTimePicker和搜索表单 #

把你的两个DateTimePicker放到搜索表单里，确保它们绑定到搜索模型的属性，同时配置插件参数提升用户体验：

// index.php
use kartik\datetime\DateTimePicker;
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\ActiveForm;

<section class="content">
    <div class="box">
        <div class="box-header">
            <p>
                <?= Html::a('Update Record', ['create'], ['class' => 'btn btn-success']) ?>
            </p>
            <!-- 搜索表单：用get方法提交，方便保留筛选参数在URL中 -->
            <?php $form = ActiveForm::begin([
                'action' => ['index'],
                'method' => 'get',
                'options' => ['class' => 'form-inline'],
            ]); ?>

            <div class="div1" style="float: left; text-align: right; width: 25%; margin-right: 20px;">
                <span style="padding-bottom: 10px; border-bottom: 1px solid black; display: block;">开始时间</span>
                <?= DateTimePicker::widget([
                    'model' => $searchModel,
                    'attribute' => 'start_date',
                    'pluginOptions' => [
                        'autoclose' => true,
                        'format' => 'yyyy-mm-dd hh:ii:ss', // 和数据库时间格式严格匹配
                        'todayHighlight' => true,
                    ],
                    'options' => ['placeholder' => '选择开始时间'],
                ]) ?>
            </div>

            <div class="div2" style="float: left; text-align: right; width: 25%;">
                <span style="padding-bottom: 10px; border-bottom: 1px solid black; display: block;">结束时间</span>
                <?= DateTimePicker::widget([
                    'model' => $searchModel,
                    'attribute' => 'end_date',
                    'pluginOptions' => [
                        'autoclose' => true,
                        'format' => 'yyyy-mm-dd hh:ii:ss',
                        'todayHighlight' => true,
                    ],
                    'options' => ['placeholder' => '选择结束时间'],
                ]) ?>
            </div>

            <div style="float: left; margin-left: 20px; margin-top: 25px;">
                <?= Html::submitButton('搜索', ['class' => 'btn btn-primary']) ?>
                <?= Html::resetButton('重置', ['class' => 'btn btn-default']) ?>
            </div>

            <?php ActiveForm::end(); ?>
        </div>
        <div class="box-body" style="clear: both;">
            <?= GridView::widget([
                'dataProvider' => $dataProvider,
                'filterModel' => $searchModel,
                'columns' => [
                    ['class' => 'yii\grid\SerialColumn'],
                    'id',
                    'created_at:datetime', // 格式化显示时间字段
                    // 其他业务列配置...
                    ['class' => 'yii\grid\ActionColumn'],
                ],
            ]); ?>
        </div>
    </div>
</section>

额外提醒 #

• 确保已安装Kartik DateTimePicker扩展：执行composer require kartik-v/yii2-widget-datetimepicker完成安装
• 时间格式必须和数据库中时间字段的格式完全一致，否则筛选逻辑会失效
• 如果你的时间字段是时间戳（int类型），需要在搜索模型里把输入的时间转换为时间戳，比如strtotime($this->start_date)

内容的提问来源于stack exchange，提问作者Moeez