Date Picker In Column Filter Not Working (Using Bootstrap data-plugin="datepicker")

BrianA12

Hi

I have a datatable with server-side processing, consisting of a number of columns. Each column has a filter input (or two inputs for From Date and To Date, for instance). So different columns have different types of filters, for example some columns have a text input filter, some a select menu, and others require a From Date, To Date (or Date Range) filter.

For simplicity, let's consider the case when the filter only needs to be a date input, like a text input filter, but when clicked, a small calendar appears and the user can choose a date. After choosing a date, the input 'filter box' will contain the selected date, like for example '10/15/2020'.

I have previously managed to get date inputs using the Bootstrap datepicker data-plugin, by using the below:

<input type='text' class="form-control mb-3" data-plugin="datepicker" data-option="{}">

This works fine. A text input appears on screen, and when the user clicks on the text box, a small calendar pops up and the user can click on a date which appears in the text input.

Now, I need to do this in a datatable column filter, so I did the following to add it in column with index 6 (will be done in other columns):

<script>
$(document).ready(function() {
var table = $('#parkTableAdmin').DataTable( {
initComplete: function () {

...

// Date range
// Second hardware check date
this.api().columns(6).every( function () {
var column = this;
var fromDate = $(' <input id="secHwFromDateInput" type="text" class="form-control" data-plugin="datepicker" placeholder="Date"></input> ')              
.appendTo( $(column.footer()).empty() )
.on( 'keyup change clear', function () {
column.draw();
});
} );
},

...

} );
} );
</script>

It seems as if the data-plugin="datepicker" part in not being recognised in the JS script but work well when in HTML not in a script.

If I had to type a date (or any text) in the input #secHwFromDateInput, requests are sent to the server successfully, so I do not have any problems with passing the data to the server side.

The only problematic part is the actual datepicker/calendar (so I'm assuming something to do with the data-plugin="datepicker" being placed inside the JS script...

Thanks in advance for any suggestions!
Brian

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

BrianA12

Hi @colin,

Thank you for your reply . I created a quick test case which replicates the issue. Sorry for not doing this immediately - thought it might be a minor mistake in my code.

The link to the test case (on live.datatables.net) is http://live.datatables.net/puhaqepi/8/edit?html,css,js,console,output

In the 'Start date' column (column with index 4), I added a filter by adding some JS. When clicking on the 'Filter by datepicker' filter, the datepicker/calendar does not appear. Just to make debugging easier, the code in the script which is adding this filter is:

// Date filter (datepicker)
this.api().columns(4).every( function () {
       var column = this;
       var fromDate = $(' <input id="startDate" type="text" class="form-control" data-plugin="datepicker" placeholder="Filter by datepicker"></input> ')     
          .appendTo( $(column.footer()).empty() )
          .on( 'keyup change clear', function () {
            column.draw();
          });
} );

If using data-plugin="datepicker" in the <input> tag is not correct, how can I add a Bootstrap datepicker as a column filter please?

Thanks,
Brian

kthorngren

Your example doesn't have bootstrap nor the bootstrap-datepicker code. That is the place to start. I'm assuming you want to use this bootstrap-datepicker library. Take a look at this tutorial for using installing and using the datepicker.

Next you need to initialize the datepicker and set the date format, something like this:

        $('#startDate').datepicker({
          format: 'yyyy/mm/dd',
        });

Instead of column.draw(); like you have on line 7 in your code snippet you need to use column().search() the same as the other inputs.

Here is the updated example.
http://live.datatables.net/hosixuxo/1/edit

Kevin

BrianA12

Hi @kthorngren,

Thank you for your reply. My datatable is in a view which uses a layout view, so the Bootstrap is included in this layout. So in the layout I have the following, amongst others:

<link rel="stylesheet" type="text/css" href="../../../assets/css/bootstrap.css"/>

Thank you for the note/tutorial and the updated example. I will be having a look and will get back to you

Regarding the .draw() and search(), I had to remove the regular search and do the following since I will not have just one date input but two, to get the (1) From and (2) To dates and search results with dates in that range. The below piece of code sends the From and To dates as additional data parameters (in ajax) (d.parameterName = $('#inputIdOfDatepickerInput').val(); - Would you suggest using something else instead of this?

"ajax": {
"url": "/api/devices/iotpark",                  // Data source - IoT Park devices
"dataSrc": "data",
"type": "GET",
"data": function (d) {
//d.customData = "00C1DA21";
d.secHwFromDate = $('#secHwFromDateInput').val();
d.secHwToDate = $('#secHwToDateInput').val();

... (more custom parameters for more date ranges)

}

Thanks a lot
Brian

kthorngren

Regarding the .draw() and search(), I had to remove the regular search and do the following since I will not have just one date input but two, to get the (1) From and (2) To dates and search results with dates in that range.

Makes sense.

Would you suggest using something else instead of this?

Are you using server side processing? The draw() will send the request to the sever along with those parameters if using server side processing.

Otherwise with client side processing you will need to use a ragne search like this example. Maybe this date range plugin is what you will want.

Kevin

BrianA12

@kthorngren

Hi Kevin,

Yes I am using server side processing and the custom parameters are being sent to the server side successfully because I checked the functionality by setting the date range input as a text input for testing purposes - Sorry, I should have been more clear by specifying that I'm using SSP. The data in the test case is just dummy data. In reality it comes from my database and all processing done in my backend project.

Let me test the datepicker now, thanks again!

Regards,
Brian

BrianA12

Hello @kthorngren

Placing the code shown below (as you told me to try in your reply) at the top of my HTML view layout solved the issue! Thank you! I also managed to get the values from the From and To date filter inputs and send them to the server upon draw(), and perform all necessary processing on the server side to query the database and return the required records.

<!-- bootstrap-datepicker -->
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"/>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

Will now modify how the datepickers look using:

$('#startDate').datepicker({
       format: 'yyyy/mm/dd',
});

Thanks and regards,
Brian