Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Yii2 gridview filtering with dateRangePicker won't apply on input change

Tags:

gridview

yii2

I've applied a datePeriodPicker to an input in Yii2 gridview filter row. It works but doesn't apply right after inserting value. You have to click the input again and press Enter. Other fields work fine. Is there any way I can make it apply just as other inputs, right after change?

Here's the script i used:

var 
    dateInput = $("[name='RequestSearch[request_date]']" ),
    configObject = {
        autoClose: true,
        language:'ru',
        separator: '/',
        showShortcuts : true,
        shortcuts: {
            'next-days': [3,5,7],
            'next': ['week','month','year']
        },
        startOfWeek: 'monday',
    };

dateInput.dateRangePicker(configObject);

EDIT 1

Here's the RequestSearch.php. dateRangePicker inserts values like "2015-01-05/2015-05-09" so I had to make a handler that divides the value into $start_date and $end_date.

    public function rules()
    {
        return [
            [['id', 'KP_id', 'minimal_payment', 'mover_company_id', 'manager_id', 'workers_number', 'workhours', 'payment_additional', 'payment_car', 'payment_sum'], 'integer'],
            [['request_date', 'payment_type', 'request', 'request_time', 'quantity', 'request_type', 'address', 'status', 'customer_id', 'comment',], 'safe'],
        ];
    }

 $query->andFilterWhere([
        'id' => $this->id,
        ...

    ]);

    if ( ! is_null($this->request_date) && strpos($this->request_date, '/') !== false ) { 
        list($start_date, $end_date) = explode('/', $this->request_date);
        $query->andFilterWhere(['between', 'request_date', $start_date, $end_date]);
        $this->request_date = null;
    } else {
        $query->andFilterWhere(['request_date' => $this->request_date,]);
    }
like image 831
Marat Avatar asked Oct 30 '22 16:10

Marat


1 Answers

Looks like the datepicker plugin I used inserted the input value using val() or something like that that doesn't trigger 'change' event that is needed for proper gridview filtering. Added .trigger('change') for the input and now it all works just fine. With the plugin I use here's the script that's working:

var dateInput = $("[name='RequestSearch[request_date]']");
dateInput.dateRangePicker();
dateInput.bind('datepicker-closed', function(){
    dateInput.trigger('change');
})
like image 183
Marat Avatar answered Nov 09 '22 22:11

Marat