DateRangePicker on Change, get range Label

George commented on Dec 13, 2021

Hi, I would like to grab the selected range label ("This Month", "Last Month") of the daterangepicker on change. Is this possible? Currently I have

DateRangePicker::create(
        [
            "name"    => "dateRange",
            "maxDate" => date("Y-m-d h:i:s"),
            "format"  => "MM/DD/YYYY",
            "options" => [
                "opens"                => 'right',
                "showDropdowns"        => FALSE,
                "showCustomRangeLabel" => FALSE,
                "alwaysShowCalendars"  => TRUE,
            ],
            "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(),
                "This year"    => DateRangePicker::thisYear(),
                "Last year"    => DateRangePicker::lastYear(),
                "All Time"     => DateRangePicker::allTime(),
            ],
            "clientEvents"=>array(
                "change"=>"function(e){
                    console.log("get currently selected range....");
                    
                }",
            )
        ]
    );

Sebastian Morales commented on Dec 14, 2021

Pls try this event:

                DateRangePicker::create(array(
                    "name"=>"dateRange",
                    "ranges"  => [
                        ...
                    ],
                    "clientEvents"=>array(
                        "apply.daterangepicker"=>"function(e, picker){
                            console.log(e);
                            console.log(picker); // this picker should be the range dom element you clicked 
                        }", // for custom range, this event only fires when you click Apply button
                    )
                ));

George commented on Dec 15, 2021

Hi, thank you this worked. I also need to run this when the daterangepicker is first loaded. Is there a onLoad or onReady event I can apply in the same way as apply.daterangepicker etc.. ?

Sebastian Morales commented on Dec 16, 2021

There's an "onReady" property that you could try:

DateRangePicker::create(array(
    ...
    "onReady" => "dateRangeReady", // used with name of a js function
    // "onReady" => "function() {...}", // or with an js anonymous function, remember to put the function string in quotes
));

Let us know if it works for your case. Tks,

KoolReport's Forum

DateRangePicker on Change, get range Label #2489

Build Your Excellent Data Report