Custom filter with date

components.filter-by-date.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  options: Ember.computed('column.filterOptions.[]', function() {
    return this.get('column.filterOptions').map(opt => {
    	return {value: opt.value, label: opt.label ? new Date(opt.value).getFullYear() : ''};
    }).uniqBy('label');
  })
  
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  data: [
    {id: '1', date: new Date(1567058063000)},
    {id: '2', date: new Date(1535518463000)},
    {id: '3', date: new Date(1535518163000)}
  ],
  columns: [
    {propertyName: 'id'},
    {
      propertyName: 'date',
      filterWithSelect: true,
      componentForFilterCell: 'filterByDate', 
      filterFunction (cell, filter) {
      	return new Date(cell).getFullYear() === new Date(filter).getFullYear();
    	}
    }
  ]
});

instance-initializers.emt-inject.js

export function initialize(appInstance) {
  appInstance.inject('component:models-table', 'themeInstance', 'theme:ember-bootstrap-v4');
  appInstance.inject('component:models-table-server-paginated', 'themeInstance', 'theme:ember-bootstrap-v4');
}

export default {
  name: 'emt-inject-2',
  initialize
};

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
{{outlet}}

templates.components.filter-by-date.hbs

{{#bs-form model=column as |form|}}
	{{#form.element property="filterString" class="input-group" as |el|}}
  	{{component
			themeInstance.components.select
			id=inputId
			options=options
			cssPropertyName=column.cssPropertyName
			value=column.filterString
			class=(concat themeInstance.input " changeFilterForColumn")
		}}
    <div class="input-group-append">
    	{{#bs-button
      	type="secondary"
        class=(concat "clearFilterIcon btn-outline-secondary " themeInstance.buttonLink)
        disabled=(unless column.filterUsed "disabled")
        onClick=(action (mut column.filterString) "")}}
        	<i class={{themeInstance.clearFilterIcon}}></i>
          <span class="emt-sr-only">{{themeInstance.messages.clearFilter}}</span>
			{{/bs-button}}
		</div>
	{{/form.element}}
{{/bs-form}}
{{yield}}

templates.index.hbs

{{models-table 
	data=data
  columns=columns
  columnComponents=(hash filterByDate=(component "filter-by-date"))
}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3",
    "fa": "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-models-table": "2.10.1",
    "ember-bootstrap": "2.8.0"
  }
}