How to use datePicker in Column Filter ?

manigopal

I want to use dataPicker for only one column in Column Filter since one column has dates in it.

tried this.,

<script>
$( function() {
 $( "#example1 tfoot th:nth-child(0)".datepicker();
} );    
</script>
 
<script>
    $(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example1 tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
  
    // DataTable
    var table = $('#example1').DataTable();
  
    // Apply the search
    table.columns().every( function () {
        var that = this;
  
        $( 'input', this.footer() ).on( 'keyup change clear', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );
 </script>

but nothing worked. Screenshot added for reference too.

manigopal

also tried this.,

<script>
$( function() {
 $( "#example1 tfoot th:nth-child(1) input[type='text']".datepicker();
} );    
</script>

tangerine

Please don't make duplicate posts.

manigopal

Okay., @tangerine

any idea of making it work ?

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

manigopal

@colin @tangerine

https://datatables.net/extensions/fixedcolumns/examples/styling/col_filter.html

the above one is that i use., in that search option is of all text or even select option is there for column filter but i need datePicker in that only for my first column.,

The codes that i tried.,

and

https://jsbin.com/qitilos/edit?html,output

tangerine

Your test page reports several console errors. Also you are including two different versions of jQuery js.

manigopal

yes

colin

That'll be the place to start then. Can you clear those errors so the problem is visible, please.

Colin

manigopal

@colin if i use input type="date" instead of input type="text"

all column search are working fine with dataPicker in all columns.,

<script>
    $(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example1 tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
 
    // DataTable
    var table = $('#example1').DataTable();
 
    // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change clear', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );
 </script>

AND even i have added default datatable from example : https://datatables.net/extensions/fixedcolumns/examples/styling/col_filter.html

@ https://jsbin.com/zaneyij/edit?js,output

even at this i cant make it work.,

colin

The test case still isn't loading for me, I'm afraid. Please can you get it working with and provide steps on how to reproduce the problem.

Colin

manigopal

@colin

i have updated the code again here,
@ https://jsbin.com/zaneyij/edit?js,output

in this for first column alone i need to have #datePicker all other should remain #textBox

Code i have tried to achieve it, you can find it in JS tab

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    
      $('#example tfoot tr th:first-child').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
    }
)