DateRangePicker - Default range and display current range

AskSmart

Here is a sample of my frontend app: http://live.datatables.net/fatikuwi/13/edit

Two things that I want to accomplish:

1. I want that whenever we open the app, the default page will display the table data as if the Current month Date range filter is selected in default. A related issue to that is when we first open the app, if we click on the Date range button we'll see this range on the bottom: 12/02/2021 - 12/02/2021. So, I would like it to display the range of the current month, as for now would be: 12/01/2021 - 12/31/2021.
   I tried to accomplish that by changing the initialization of:

var startdate;
var enddate;

To

var startdate = moment().startOf("month");
var enddate = moment().endOf("month");

But it doesn't do anything.

Another question, Is there a way to display somewhere on the page the current chosen date range?

Thank you!

colin

But it doesn't do anything.

This could be because you're defined the filter after the table has been declared. Try pushing the filter to start of the code, set the two start dates, and then initialise the table.

Is there a way to display somewhere on the page the current chosen date range?

You've got those two variables for the range, so it's just a case of plumbing that in. You could do something like this, where the table info is being re-used to display custom info. Or perhaps just use infoCallback to do it directly.

Colin

AskSmart

Hi Colin, thanks for replying.

As for the first issue: I've done so: http://live.datatables.net/fatikuwi/17/edit
But it seems to change nothing. How did you mean to accomplish it?

As for the second issue: I think you had some missing libraries in your example, so here it is with the required ones: http://live.datatables.net/tiladudo/7/edit
I tried to embed it inside my sample table (http://live.datatables.net/fatikuwi/17/edit) but it messes things up, it shows only at the initial page, and when I change the view (to 25 records instead of 10) it doesn't show it.

I want this text to be equal to: text('Viewing the range between ' + startDate + ' and ' + endDate);

kthorngren

Take a look at the browser's console and you will see this error stopping the script:

Uncaught TypeError: startdate.replace is not a function

First I think Colin meant to arrange your code like this:
http://live.datatables.net/fatikuwi/18/edit

To fix the error you will need to get the startdate and enddate values from the input in the search plugin. Like this example. I'm not familiar with the bootstrap-daterangepicker picker you are using so not sure what the jQuery selectors need to be. The bootstrap-daterangepicker docs should have that info for you.

Once you fix the above error add the code you are using to update the info element so we can help debug.

Kevin

AskSmart

Hi Kevin.

I think you're mistaken, your edit (http://live.datatables.net/fatikuwi/18/edit) is not correct. Note that if you don't initialize startDate and endDate to moment()..., this error vanishes: http://live.datatables.net/fatikuwi/22/edit

I don't know how to correctly initialize them to the current month's range in default, that's why I'm asking here.

kthorngren

Sorry I wasn't trying to say my example worked as I mentioned it has errors that needs fixed. It was meant to show where Colin suggested you place the code.

I don't know how to correctly initialize them to the current month's range in default, that's why I'm asking here.

Since you are using the bootstrap-daterangepicker you will need to refer to thier docs for how to initialize. Maybe this section will help.

Maybe you can use the Datatables date picker extension instead. Here are some examples.

Kevin

AskSmart

I have already gone through their docs, and tried several things from their API, nothing seems to accomplish my thing.

kthorngren

I see what you are trying to do. You are trying to attach the datepicker to a button. To do that you need to initialize the datepicker in initComplete like your example:
http://live.datatables.net/fatikuwi/17/edit

You cn use draw() at the end of initComplete to execute the search plugin.

You have this in the search plugin:

            dateMin = startdate.replace(/-/g, "");
            dateMax = enddate.replace(/-/g, "");
            date = date.replace(/-/g, "");

The console errors are complaining that Uncaught TypeError: startdate.replace is not a function. The reason is Javascript replace() is for strings but you have created these as moment.js objects.

I moved the following to the top of the script:

     //DATE RANGE
    var startdate = moment().startOf("month");
    var enddate = moment().endOf("month");

Set the date for Tiger Nixon to be in the range of Dec 2021 to match the current startdate and endate range and Garrett Winters to be in Nov 2021. The table now just displays only Tiger on startup.

I commented out the format you have in the datepicker event because it doesn't match the format in the table.

    //Filter the datatable on the datepicker apply event
    $("#reportrange").on("apply.daterangepicker", function(ev, picker) {
        startdate = picker.startDate //.format("YYYY-MM-DD");
        enddate = picker.endDate  //.format("YYYY-MM-DD");
        oTable.fnDraw();
    });

Same with this line:

            var date = moment(d.toISOString());
            //date = date.format("YYYY-MM-DD");

If you set the date picker to start with Nov 1 2021 and end with Dec 31 2021 you will see two rows - Tiger and Garrett.

Updated example:
http://live.datatables.net/fatikuwi/23/edit

Kevin

AskSmart

@kthorngren Kevin, you're amazing! Thank you so much.

The last thing, I tried embedding Colin's suggestion of showing the current date range on the page: http://live.datatables.net/tiladudo/1/edit

I've inserted it so:
http://live.datatables.net/fatikuwi/26/edit

But it doesn't show anything new on the page.
Do you know why is it?

kthorngren

There are a couple issues. You have:

 var oTable = $("#example").dataTable({ ... });

The dataTable returns a jQuery object and it seems chaining the .on('raw init...` listener doesn't work. Change it to this:

 var oTable = $("#example").DataTable({ ... });

Now the event listener is initiated. See the API docs for more details.

You have this:

    }).on('draw init', function() {
    onDraw(table);
  });

Your API variable is oTable not table.

Last is to move the onDraw(this.api()); statement to the last line of initComplete so it executes after the initial table draw() but before the .on('draw init' is invoked.

http://live.datatables.net/xipileni/1/edit

Kevin

AskSmart

@kthorngren Thank you Kevin, but it doesn't get updated when I pick another date range: http://live.datatables.net/xipileni/3/edit

You can pick for example Current year under Date range, and this information is not updated.

kthorngren

This is displayed in the browser's console when changing the date range:

Uncaught TypeError: oTable.fnDraw is not a function

Since we changed to using DataTable() for the initialization we need to use draw(). Updated example:
http://live.datatables.net/xipileni/4/edit

Kevin