I have DateRangtimePicker on top of my widgets, and what I need is when I change Datetimepicker should update other widgets too.

class SalesCard extends KoolReport
{
    use \koolreport\inputs\Bindable;
    use \koolreport\inputs\POSTBinding;

    protected function bindParamsToInputs()
    {
        return array(
            "dateRange"=>"dateRange"
        );
    }

    protected function defaultParamValues()
    {
        return array(
            "dateRange"=> array(date("Y-m-d 00:00:00"),date("Y-m-d 23:59:59")),
        );
    }

    protected function setup()
    {
     //
   }
}

in fronted is `php <div class="row mb-1">

<div class="col-md-12">
    <?php
    DateRangePicker::create(array(
        "name"=>"dateRange",
    ));
    ?>
</div>
<pre><code><?php echo json_encode($this->params,JSON_PRETTY_PRINT) ?></code></pre>

</div>

<div class="row mb-1">
    <div class="col-md-4">
        <?php
            Card::create([
                "title"=>"Sales Credit",
                "value" => $this->src("mysql_datasource")
                    ->query('
                      SELECT
                          sum(transactions.total_amount) total
                      FROM
                          transactions
                      WHERE
                          transactions.status = 3 AND transactions.transaction_type = 1 AND transactions.invoice_type = \'CREDIT\' AND 
                          (transactions.created_at between :start AND :end) 
                    ')
                    ->params(array(
                        ":start" => $this->params['dateRange'][0],
                        ":end" => $this->params['dateRange'][1]
                    )),
                "baseValue"=>12,
                "format"=> [
                    "value"=> [
                    ]
                ],
                "cssClass"=> [
                    "card"=>"bg-primary",
                    "title"=>"text-white",
                    "value"=>"text-white"
                ]

            ]);
        ?>
    </div>

</div> </div> `

quick help, please?!

Update : when I use the button to submit the form I have got the date, so my question how could I get the date using onchnge event of DateRangTimePicker

<form method="post">
        <?php
        DateRangePicker::create(array(
            "name"=>"dateRange",
            "format"=>"MMM Do, YYYY",
            "options"=>array(
                "alwaysShowCalendars"=>true,
                "showDropdowns"=>true,
                "autoApply"=>true,
            ),
            "clientEvents"=>array(
              "change"=>"function(e){
                  console.log(e.date);
                  console.log(e.oldDate);
              }",
            )
        ));

      ?>
      <div class="form-group" style="margin-top:30px;">
        <button type="submit" class="btn btn-lg btn-primary">Submit form</button>
      </div>

yes, it works, and then inside apply.daterangepicker function submit the form. actually I want to be automatically when changing DateRangePicker then update other Widgets without load a page exactly this what I need it.

Thanks.