Challenge: date format inside select input

arnonrdp · March 2021

I have a challenge for you, guys. lol

I think Multi Filter Select is amazing!! But what if I want to show only the month and year inside the select inputs in a different format?

Example:
- Table displaying date format like: DD/MM/YYYY
- Select inputs date format like: MMM/YYYY

Is this possible?

kthorngren · March 2021

This piece of code builds the select optoins:

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );

One option is to use moment.js to format the displayed option.

Kevin

arnonrdp · March 2021

According to Moment.js what I need is: moment().format("MMM / YY");

But what should I do to apply inside this piece of code you sent?

column.data().unique().sort().each( function ( d, j ) {
    select.append( '<option value="'+moment().format("MMM / YY")+'">'+moment().format("MMM / YY")+'</option>' )
} );

This is not that simple, right?

kthorngren · March 2021

You will want to pass in the string value as documented here. You probably don't want to change the option value just what is displayed, correct? Maybe something. like this:

column.data().unique().sort().each( function ( d, j ) {
    select.append( '<option value="'+d+'">'+moment().format(d, "MMM / YY")+'</option>' )
} );

Kevin

arnonrdp · March 2021

Unfortunately it didn't work. But maybe there is something wrong on my code.

Here is:
$('#example1').DataTable({
initComplete: function () {
this.api().columns([4]).every( function () {
var column = this;
var select = $('<br><select><option value=""></option></select>')
.appendTo( $(column.header()) )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);

          column
          .search( val ? '^'+val+'$' : '', true, false )
          .draw();
        } );
        $( select ).click( function(e) {
          e.stopPropagation();
        });

        column.data().unique().sort().each( function ( d, j ) {
          select.append( '<option value="'+d+'">'+moment().format(d, "MMM / YY")+'</option>' )
        } );
      } );
    },
  });

And here is the result:

Do you have any idea?

kthorngren · March 2021

Please build a running test case with a sample of your so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

You might need to provide the source format. Look at the moment docs. I believe it would be the third parameter.

Kevin

arnonrdp · March 2021

I am reading the Moment.js docs and learning more about it.

Anyway here is: http://live.datatables.net/filobuvu/1/edit?html,js,output

kthorngren · March 2021

Sorry, I got the parameters backwards. Also you will need the format() methos, like this:

select.append( '<option value="'+d+'">'+ moment(d, 'DD/MM/YYYY').format('MMM/YYYY') +'</option>' );

See the example:
http://live.datatables.net/pikayoru/1/edit

I commented out this line to remove the reinitialize error:

<script src="http://www.stock1.com.br/public/js/main.js"></script>

It will take extra work if you want to filter by month and year instead of the specific data. You can use columns.render to set the value for the filter operation using orthogonal data. The the Computed Values example.

Kevin

arnonrdp · March 2021

Kevin, I really appreciate your help. It is working pretty fine.

Now I am facing the second "trouble" Haha.

Thanks you so much!

kthorngren · March 2021

A couple changes are needed to make the search work correctly. See this example:
http://live.datatables.net/pikayoru/2/edit

Added the columns.render I mention. Also changed the loop building the select options to use cells().render() to get the values rendered for the filter operation.

        api.cells(null, column).render('filter').unique().sort().each( function ( d, j ) {
          select.append( '<option value="'+d+'">'+ d +'</option>' );
        } );

Kevin

arnonrdp · March 2021

Kevin, you really rock!! You make it look easy.

Now, I am studying about Computed values to apply sorting within the select.

kthorngren · March 2021

I didn't pay attention to that :-)

You will want to update the last code snippet I posted. This example from this thread may help. The end result os for something different but using the map function with the moment function to unix might help to refactor the api.cells(null, column).render('filter') loop to sort the date values. I don't have time now to work up an example but might get a chance to look in the morning if you don't figure it out.

Kevin

kthorngren · March 2021

Had a chance to work on it this morning. Took a bit to workout but here is the example:
http://live.datatables.net/pikayoru/5/edit

Basically it converts the MMM/YYYY date strings to unix timestamps for sorting. Once sorted it converts back to the MMM/YYYY format to display in the select options.

Kevin

arnonrdp · March 2021

Man!! I was trying to do it, but without success and you made it!! Haha

I think we should show it to everybody in the comments because you made a very useful code.

I really appreciate what you did and I thank you so much!!

arnonrdp · March 2021

Hey @kthorngren, it's me again.

Everything you taught me here can be used on a server-side processing table?

kthorngren · March 2021

Sort of. The column().search() will work but the loop to build the selects will only see the client side (current page) data. One option is for your server script to look for the draw parameter, explained here, for the value 1. This is the initial request to the server. You can then build your options using your server script and return them in an additional object, options maybe :-) Then in initComplete you can use the second parameter, json, to get the options response to populate the select list. Sorry don't have an example at the moment but this technique has been discussed on the forum so you might fin an example.

Kevin

arnonrdp · March 2021

Everything is working pretty fine. I appreciate your help!

Thank you so much, @kthorngren.

Here is the url if you wanna test: http://myoption.com.br/index.html

kthorngren · March 2021

Looks good, glad you got it working!

Kevin

Challenge: date format inside select input

Challenge: date format inside select input

Answers

Howdy, Stranger!

Categories

DataTables

Challenge: date format inside select input

Challenge: date format inside select input

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables