DateRangePicker doesn't recognise carbon date

Question

Using Vue.js ( Vue-Tables https://www.npmjs.com/package/vue-tables ) with laravel. The data is being succesfully displayed, but the daterangepicker (http://www.daterangepicker.com/) is not sorting at all. No matter what interval I set, the records won't display. The field is being parsed with carbon to return in needed format

public function getFootageDateAttribute($date)
{
    return Carbon::parse($date)->format('d-m-Y');
}

In the js file, I have dateFormat: "DD-MM-YY", filterByColumn: true, dateColumns: ['footage_date'], . When I inspect with vue dev-tools, the field is footage_date: "03-04-2016"

If I hardcode the date as in the example ( https://jsfiddle.net/matfish2/f5h8xwgn/ ) using

// Courtesy of Tomasz Nurkiewicz (Elegant method to generate array of random dates within two dates)

function randomDate(start, end) {
  return moment(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}

the date is in this format footage_date: "1974-03-27T18:19:40.364Z" and it works.

Pastebin of the full js file http://pastebin.com/6hCe2eQL . Client side http://pastebin.com/xTUcAK98

Answer 1

The footage_date was supposed to be passed as a moment instance, not as a date string, therefore, modifying the ready function did it

 ready: function(){
        this.$http.get('/api/footage')
            .then(function(response){
                footages = response.data
                footages.forEach(footage => {
                    footage.footage_date = moment(footage.footage_date)
                })
                this.tableData = footages
            }.bind(this))
    }