How to only show Data for selected day with datepicker?

ChrisKolli

Hello,

I am currently building a very complex table and I need some help, first of a picture of what it should look like in the end:

as you can see I have two tables that need to be filled with data, but i only want a single day to be shown per page since it is more like a daily calendar.
That should be selectable with a datepicker in the upper left corner.
I also want only one search bar for the whole table.

By the way any help on how to properly do those complex rows would be appreciated as I currently only got it to work by putting two values in one cell seperated by a

---

my current page looks like this:

I don't really know which code to show you since it is basically vanilla from the generator, i only added a few values after the fact.

The double value per cell part looks like this: but anything else is just basic atm.

columns:[ { "data": "pic", render: function ( data, type, row ) { return row.pic + '<hr>' + row.p; } }, ],

colin

That image has a table with colspan and rowspan, they're not supported. The installation page states:

Please also note that while DataTables supports colspan and rowspan in the table's header and footer, they are not supported in the table's tbody and must not be present.

Colin

ChrisKolli

Yes I did read that, that's why I asked if there is any other way. I'm happy with the way there are just two values in a cell so that's no problem.

Can you help with the date picker though?
I can only find threads talking about adding a date filter to a column. But I want to add it as the default search.

kthorngren

I can only find threads talking about adding a date filter to a column. But I want to add it as the default search.

The same technique will work. Instead of using column().search() you would use search() to search the whole table. You can place the datepicker where you like. Then in the event handler use search() with the datepicker value. I don't have n example handy but if you want help please build a simple test case with the datepicker you are using and table data including dates in the format you are using.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ChrisKolli

Thank you a lot, i got it to work now I used this:

$('#search').on( 'change', function () {

            var v =$(this).val();  // getting search input value

            table.columns(0).search(v).draw();
        } );

         $( ".datepicker" ).datepicker({
            dateFormat: "dd.mm.y",
            showOn: "button",
            showAnim: 'slideDown',
            showButtonPanel: true ,
            autoSize: true,
            buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
            buttonImageOnly: true,
            buttonText: "Select date",
            closeText: "Clear"
        });
        $(document).on("click", ".ui-datepicker-close", function(){
            $('.datepicker').val("");
            dataTable.columns(0).search("").draw();
        });

for everyone else trying this; jsut add a simple input in the html:

<input readonly="readonly" type="text" id="search" class="search datepicker" >

if you want to show the daily data by default add this to the JS:

function formatDate(d) {
            //get the month
            var month = d.getMonth();
            //get the day
            //convert day to string
            var day = d.getDate().toString();
            //get the year
            var year = d.getFullYear();
            //pull the last two digits of the year
            year = year.toString().substr(-2);
            //increment month by 1 since it is 0 indexed
            //converts month to a string
            month = (month + 1).toString();
            //if month is 1-9 pad right with a 0 for two digits
            if (month.length === 1)
            {
                month = "0" + month;
            }
            //if day is between 1-9 pad right with a 0 for two digits
            if (day.length === 1)
            {
                day = "0" + day;
            }
            //return the string "MMddyy"
            return day + '.' + month + '.' + year;
        }
        var date = new Date();

table.columns(0).search(formatDate(date)).draw();

and then just change the formatDate() to your preferred format.