DateRangePicker custom range and default date

Mathieu Viennet commented on Sep 10, 2021

Hi!

I'm using Dashboard. I would like to create a custom date range with the Date Range Picker :

First day of the current month to Today

So for example we are September 10th : From September 1st to September 10th

1 - Where to put the default Start date and end date?

2 - Where should i put my "custom date function" ?

My SalesDateRange.php looks like this :

<?php

use \koolreport\dashboard\inputs\DateRangePicker;

class SalesDateRange extends DateRangePicker
{
    protected function onCreated()
    {
        $this->defaultValue($this::lastMonth());
    }

    protected function actionChange($request,$response)
    {
        //On client change, update table
        $this->sibling("SalesByDate")->update();
        $this->sibling("SalesTable")->update();
        $this->sibling("SalesNetMetric")->update();
        $this->sibling("SalesGrossMetric")->update();
        $this->sibling("SalesAvgOrderMetric")->update();
        $this->sibling("SalesNumOrderMetric")->update();
        
    }
}

And my board:

<?php

use \koolreport\dashboard\Dashboard;
use \koolreport\dashboard\containers\Row;
use \koolreport\dashboard\containers\Panel;
use \koolreport\dashboard\widgets\Text;
use \koolreport\dashboard\containers\Html;

class SalesBoard extends Dashboard
{
    protected function widgets()
    {
        return [
            Row::create()->sub([
                Row::create(),
                SalesDateRange::create()->width(1/3),
            ]),

           Row::create()->sub([
	            Panel::create()->sub([
                    SalesGrossMetric::create("SalesGrossMetric"),
                ])->width(1/4),
                Panel::create()->sub([
                    SalesNetMetric::create("SalesNetMetric"),
                ])->width(1/4),
                Panel::create()->sub([
                    SalesAvgOrderMetric::create("SalesAvgOrderMetric"),
                ])->width(1/4),
                Panel::create()->sub([
                    SalesNumOrderMetric::create("SalesNumOrderMetric"),
                ])->width(1/4)
            ]),


            Row::create()->sub([
                Panel::create()->sub([
                    SalesByDate::create(),
                ])->width(1/1),
            ]),
			Row::create([
                Panel::create()->width(1/1)
					->sub([ Html::h2("Daily Sales Details") ])
					->cssClass("trans-row")
                ]),
            SalesTable::create(),
        ];
    }
}

Thank you very much for your help!

KoolReport commented on Sep 11, 2021

Hi, basically you can do:

    protected function onCreated()
    {
        $this->defaultValue(["2021-09-01 00:00:00","2021-09-10 23:59:59"]);
    }

So you see it is just an array with first value is start date and second is end date. You can do your own calculation to get first day of month and today to feed to default value.

Hope that helps.

Mathieu Viennet commented on Sep 11, 2021

Thank you!

Also, if I want to add this date range as a custom selector (like Today, Yesterday, This month), where do i need to put that?

Thank you very much!

KoolReport commented on Sep 11, 2021

You use the ranges() function like in documentation.

Examples:

use \koolreport\dashboard\inputs\DateRangePicker;

class MyRangePicker extends DateRangePicker
{
    protected function onInit()
    {
        $this->format("MMM Do, YYYY")
            ->value(["2020-01-01 00:00:00","2020-03-01 00:00:00"])
            ->language("en")
            ->minDate("2020-01-01 00:00:00")
            ->maxDate("2020-04-01 00:00:00")
            ->icon("fa fa-calendar-alt")
            ->caret("fa fa-caret-down")
            ->ranges([
                "Today"=>DateRangePicker::today(),
                "Yesterday"=>DateRangePicker::yesterday(),
                "Last 7 days"=>DateRangePicker::last7days(),
                "Last 30 days"=>DateRangePicker::last30days(),
                "This month"=>DateRangePicker::thisMonth(),
                "Last month"=>DateRangePicker::lastMonth(),
            ]);
    }
}

KoolReport's Forum

DateRangePicker custom range and default date #2331

Build Your Excellent Data Report