Yii2-如何使用 kartik 日期时间选择器搜索 gridview 记录

Question

我在 yii2 框架中工作。我的 index 视图中有两个 kartik 日期时间选择器。我想用它们来搜索记录。

<section class="content">
<div class="box">
    <div class="box-body">

        <p>
            <?= Html::a('Update Record', ['create'], ['class' => 'btn btn-success']) ?>
        </p>
        <div class="div1" style="float: left; text-align: right; width: 25%;">

                <span style="padding-bottom: 10px; border-bottom: 1px solid black">
           <?php

           echo DateTimePicker::widget([
               'name' => 'startTime',
               'options' => ['placeholder' => 'Select Start Time ...'],
               'convertFormat' => true,
               'pluginOptions' => [
                   'format' => 'yyyy-dd-MM HH:i:ss',
                   //'startDate' => '01-Mar-2014 12:00 AM',
                   'todayHighlight' => true
               ]
           ]);
           ?>
        </span>

        </div>
        <div class="div2" style="float: left; text-align: right; width: 25%;">

                <span style="padding-bottom: 10px; border-bottom: 1px solid black">
           <?php

           echo DateTimePicker::widget([
               'name' => 'endTime',
               'options' => ['placeholder' => 'Select End Time ...'],
               'convertFormat' => true,
               'pluginOptions' => [
                   'format' => 'yyyy-dd-MM HH:i:ss',
                  // 'startDate' => '01-Mar-2014 12:00 AM',
                   'todayHighlight' => true
               ]
           ]);
           ?>
        </span>

        </div>
        <p>
            <?= Html::a('Search Record', ['index','id','name'=>'search'], ['class' => 'btn btn-info']) ?>
        </p>
        <?php Pjax::begin(); ?>
        <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
        ['class' => 'yii\grid\SerialColumn'],


        'meter_msn',
        [
            'label' => 'Meter Type',
            'value' => function ($d) {
                if(is_object($d))
                    return $d->meter_type;
                return ' - ';
            },
            'filter' => Html::activeDropDownList($searchModel, 'meter_type', \app\models\Meters::getMeterTypeValues(), ['prompt' => "Meter Type", 'class' => 'form-control']),

        ],
        'sub_div_code',
        [
            'label' => 'Sub Division Name',
            'value' => function ($d) {
                if(is_object($d->subdiv))
                    return $d->subdiv->name;
                return ' - ';
            },
            'filter' => Html::activeDropDownList($searchModel, 'sub_div_code', \common\models\SurveyHescoSubdivision::toArrayList(), ['prompt' => "Sub-Div", 'class' => 'form-control']),

        ],
        'meter_ping_date_time',

        'start_date_time',
        'end_date_time',

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

图形界面

索引控制器

 public function actionIndex()
{
    $value = isset($_GET['name']);
    if($value =='search')
    {

    }
    else
    {
        $searchModel = new MeterpingSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);
    }

}

现在我想在用户选择开始和结束日期时间并单击搜索按钮时搜索记录。即我必须传递日期时间值然后搜索记录。下面是我的搜索模型。

public function rules()
{
    return [
        [['id', 'meter_id'], 'integer'],
        [['meter_msn', 'sub_div_code','meter_type', 'sub_div_name'], 'safe'],
    ];
}
public function scenarios()
{
    // bypass scenarios() implementation in the parent class
    return Model::scenarios();
}
public function search($params)
{
    $query = MeterPing::find();

    // add conditions that should always apply here

    $dataProvider = new ActiveDataProvider([
        'query' => $query,
    ]);

    $this->load($params);

    if (!$this->validate()) {
        // uncomment the following line if you do not want to return any records when validation fails
        // $query->where('0=1');
        return $dataProvider;
    }

    // grid filtering conditions
    $query->andFilterWhere([
        'id' => $this->id,
        'meter_id' => $this->meter_id,
        'meter_ping_date_time' => $this->meter_ping_date_time,
        'start_date_time' => $this->start_date_time,
        'end_date_time' => $this->end_date_time,
        'meter_type' => $this->meter_type,
    ]);

    $query->andFilterWhere(['like', 'meter_msn', $this->meter_msn])
        ->andFilterWhere(['like', 'sub_div_code', $this->sub_div_code])
        ->andFilterWhere(['like', 'sub_div_name', $this->sub_div_name]);

    return $dataProvider;
}

更新 1

根据给出的答案，我尝试更改我的代码

<section class="content">
<div class="box">
    <div class="box-body">

        <p>
            <?= Html::a('Update Record', ['create'], ['class' => 'btn btn-success']) ?>
        </p>
        <?php Pjax::begin(); ?>

        <?php $form = ActiveForm::begin([
            'action' => ['index'],
            'method' => 'get',
            'options' => [
                'data-pjax' => 1
            ],
        ]); ?>
        <div class="div1" style="float: left; text-align: right; width: 25%;">

            <span style="padding-bottom: 10px; border-bottom: 1px solid black">
       <?php

       echo DateTimePicker::widget([
           'model' => $searchModel,
           'attribute'=>'start_date_time',
           'options' => ['placeholder' => 'Select Start Time ...'],
           'convertFormat' => true,
           'pluginOptions' => [
               'format' => 'yyyy-dd-MM HH:i:ss',
               // 'startDate' => '01-Mar-2014 12:00 AM',
               'todayHighlight' => true
           ]
       ]);
       ?>
    </span>

        </div>
        <div class="div2" style="float: left; text-align: right; width: 25%;">

            <span style="padding-bottom: 10px; border-bottom: 1px solid black">
       <?php

       echo DateTimePicker::widget([
           'model' => $searchModel,
           'attribute'=>'end_date_time',
           'options' => ['placeholder' => 'Select End Time ...'],
           'convertFormat' => true,
           'pluginOptions' => [
               'format' => 'yyyy-dd-MM HH:i:ss',
               //'startDate' => '01-Mar-2014 12:00 AM',
               'todayHighlight' => true
           ]
       ]);
       ?>
    </span>

        </div>
        <p>
            <?= Html::submitButton('Search', ['class' => 'btn btn-primary']) ?>
        </p>

        <?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],

        //'id',
        //'meter_id',
        'meter_msn',
        [
            'label' => 'Meter Type',
            'value' => function ($d) {
                if(is_object($d))
                    return $d->meter_type;
                return ' - ';
            },
            'filter' => Html::activeDropDownList($searchModel, 'meter_type', \app\models\Meters::getMeterTypeValues(), ['prompt' => "Meter Type", 'class' => 'form-control']),

        ],
        'sub_div_code',
        [
            'label' => 'Sub Division Name',
            'value' => function ($d) {
                if(is_object($d->subdiv))
                    return $d->subdiv->name;
                return ' - ';
            },
            'filter' => Html::activeDropDownList($searchModel, 'sub_div_code', \common\models\SurveyHescoSubdivision::toArrayList(), ['prompt' => "Sub-Div", 'class' => 'form-control']),

        ],
        'meter_ping_date_time',

        'start_date_time',
        'end_date_time',

        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>
        <?php ActiveForm::end(); ?>
<?php Pjax::end(); ?>
    </div>
</div>
 </section>

动作指数

   $searchModel = new MeterpingSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);

点击按钮后没有得到我想要的结果。

更新 2

我更新后的搜索模型如下

 /**
 * @inheritdoc
 */
public function rules()
{
    return [
        [['id', 'meter_id'], 'integer'],
        [['meter_msn', 'sub_div_code','meter_type', 'sub_div_name','start_date_time','end_date_time'], 'safe'],
    ];
}

/**
 * @inheritdoc
 */
public function scenarios()
{
    // bypass scenarios() implementation in the parent class
    return Model::scenarios();
}

/**
 * Creates data provider instance with search query applied
 *
 * @param array $params
 *
 * @return ActiveDataProvider
 */
public function search( $params ) {
    $query = MeterPing::find ();

    // add conditions that should always apply here

    $dataProvider = new ActiveDataProvider ( [
        'query' => $query ,
    ] );

    $this->load ( $params );

    if ( !$this->validate () ) {
        // uncomment the following line if you do not want to return any records when validation fails
        // $query->where('0=1');
        return $dataProvider;
    }

    // grid filtering conditions
    $query->andFilterWhere ( [
        'id' => $this->id ,
        'meter_id' => $this->meter_id ,
        'meter_ping_date_time' => $this->meter_ping_date_time ,
    ] );

    if ( $this->start_date_time !== '' ) {
        $query->andFilterWhere ( [ '>=' , 'DATE_FORMAT(start_date_time,"%Y-%m-%d %h:%i:%s")' , date ( 'Y-m-d h:i:s' , strtotime ( $this->start_date_time ) ) ] );
    }
    if ( $this->end_date_time !== '' ) {
        $query->andFilterWhere ( [ '<=' , 'DATE_FORMAT(end_date_time,"%Y-%m-%d %h:%i:%s")' , date ( 'Y-m-d h:i:s' , strtotime ( $this->end_date_time ) ) ] );
    }


    $query->andFilterWhere ( [ 'like' , 'meter_type' , $this->meter_type ] );

    return $dataProvider;
}

日期时间选择器

 <div class="div1" style="float: left; text-align: right; width: 25%;">

            <span style="padding-bottom: 10px; border-bottom: 1px solid black">
       <?php

       echo DateTimePicker::widget([
           'model' => $searchModel,
           'attribute'=>'start_date_time',
           'options' => ['placeholder' => 'Select Start Date Time ...'],
           'convertFormat' => true,
           'pluginOptions' => [
               'format' => 'yyyy-MM-dd hh:i:ss',
               // 'startDate' => '01-Mar-2014 12:00 AM',
               'todayHighlight' => true
           ]
       ]);
       ?>
    </span>

        </div>
        <div class="div2" style="float: left; text-align: right; width: 25%;">

            <span style="padding-bottom: 10px; border-bottom: 1px solid black">
       <?php

       echo DateTimePicker::widget([
           'model' => $searchModel,
           'attribute'=>'end_date_time',
           'options' => ['placeholder' => 'Select End Date Time ...'],
           'convertFormat' => true,
           'pluginOptions' => [
               'format' => 'yyyy-MM-dd hh:i:ss',
               //'startDate' => '01-Mar-2014 12:00 AM',
               'todayHighlight' => true
           ]
       ]);
       ?>
    </span>

        </div>

我也调查过这个 question，但它没有帮助我。

非常感谢任何帮助。

Answer 1

您应该使用 searchModel 对象来创建活动字段，并用表单标签包装您的字段，因为日期选择器也在索引操作的视图中。将 html 更改为以下内容，我假设您的表单位于 pjax 容器 <?php Pjax::begin (); ?>

内

<?php $form = ActiveForm::begin([
        'action' => ['index'],
        'method' => 'get',
        'options' => [
            'data-pjax' => 1
        ],
    ]); ?>
<div class="div1" style="float: left; text-align: right; width: 25%;">

                <span style="padding-bottom: 10px; border-bottom: 1px solid black">
           <?php

           echo DateTimePicker::widget([
               'model' => $searchModel,
               'attribute'=>'start_date_time',
               'options' => ['placeholder' => 'Select Start Time ...'],
               'convertFormat' => true,
               'pluginOptions' => [
                   'format' => 'yyyy-dd-MM HH:i:ss',
                  // 'startDate' => '01-Mar-2014 12:00 AM',
                   'todayHighlight' => true
               ]
           ]);
           ?>
        </span>

        </div>
        <div class="div2" style="float: left; text-align: right; width: 25%;">

                <span style="padding-bottom: 10px; border-bottom: 1px solid black">
           <?php

           echo DateTimePicker::widget([
               'model' => $searchModel,
                'attribute'=>'end_date_time',
               'options' => ['placeholder' => 'Select End Time ...'],
               'convertFormat' => true,
               'pluginOptions' => [
                   'format' => 'yyyy-dd-MM HH:i:ss',
                   //'startDate' => '01-Mar-2014 12:00 AM',
                   'todayHighlight' => true
               ]
           ]);
           ?>
        </span>

        </div>
        <p>
            <?= Html::submitButton('Search', ['class' => 'btn btn-primary']) ?>
        </p>
<?php ActiveForm::end(); ?>

然后将您的操作更改为以下

 public function actionIndex()
{

        $searchModel = new MeterpingSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);
}

以上将搜索 start_date_time 和 end_date_time 与表单字段中输入的确切日期和时间匹配的记录，如果您只想匹配日期部分，则可能需要格式化搜索模型中 $query->andFilterWhere([ 条件中的列和匹配值。

'DATE_FORMAT('%Y-%d-%m',start_date_time)' => date("Y-d-m",strtotime($this->start_date_time)),
'DATE_FORMAT('%Y-%d-%m',end_date_time)' => date("Y-d-m",strtotime($this->end_date_time)),

EDIT

你希望输入的开始和结束时间获取所有开始和结束时间在这个范围内的记录，如果我假设正确的话 FIDDLE 正在做，如果那是正确的

删除

 'DATE_FORMAT('%Y-%d-%m',start_date_time)' => date("Y-d-m",strtotime($this->start_date_time)),
 'DATE_FORMAT('%Y-%d-%m',end_date_time)' => date("Y-d-m",strtotime($this->end_date_time)),

并像下面这样更改搜索功能

 // grid filtering conditions
    $query->andFilterWhere([
        'id' => $this->id,
        'meter_id' => $this->meter_id,
        'meter_ping_date_time' => $this->meter_ping_date_time,
        'meter_type' => $this->meter_type,
    ]);
    $query->andFilterWhere(['<=','DATE_FORMAT(start_date_time,"%Y-%m-%d")',date('Y-m-d',strtotime($this->start_date_time))]);
    $query->andFilterWhere(['>=','DATE_FORMAT(end_date_time,"%Y-%m-%d")',date('Y-m-d',strtotime($this->end_date_time))]);
    $query->andFilterWhere(['like', 'meter_msn', $this->meter_msn])
    ->andFilterWhere(['like', 'sub_div_code', $this->sub_div_code])
    ->andFilterWhere(['like', 'sub_div_name', $this->sub_div_name]);

     return $dataProvider;

`EDIT2`

将结束日期和开始日期的 DateTimePicker 格式更新为 'format' => 'yyyy-MM-dd hh:i:ss' ,

然后将您的搜索功能更新为以下

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

        // add conditions that should always apply here

        $dataProvider = new ActiveDataProvider ( [
            'query' => $query ,
                ] );

        $this->load ( $params );

        if ( !$this->validate () ) {
            // uncomment the following line if you do not want to return any records when validation fails
            // $query->where('0=1');
            return $dataProvider;
        }

        // grid filtering conditions
        $query->andFilterWhere ( [
            'id' => $this->id ,
            'meter_id' => $this->meter_id ,
            'meter_ping_date_time' => $this->meter_ping_date_time ,
        ] );

        if ( $this->start_date_time !== '' && !is_null($this->start_date_time) ) {
        $query->andFilterWhere ( [ '>=' , 'DATE_FORMAT(start_date_time,"%Y-%m-%d %H:%i:%s")' , date ( 'Y-m-d H:i:s' , strtotime ( $this->start_date_time ) ) ] );
    }
    if ( $this->end_date_time !== '' && !is_null($this->end_date_time) ) {
        $query->andFilterWhere ( [ '<=' , 'DATE_FORMAT(end_date_time,"%Y-%m-%d %H:%i:%s")' , date ( 'Y-m-d H:i:s' , strtotime ( $this->end_date_time ) ) ] );
    }


        $query->andFilterWhere ( [ 'like' , 'meter_type' , $this->meter_type ] );

        return $dataProvider;
    }

Yii2-如何使用 kartik 日期时间选择器搜索 gridview 记录

Yii2- How to search gridview records using kartik date time picker

gridview

filter

yii2

yii2-advanced-app

`EDIT2`