DateRangePicker doesn't recognise carbon date

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 hardcore the date as in the example ( https://jsfiddle.net/matfish2/f5h8xwgn/ ) using

// Courtesy of Tomasz Nurkiewicz (http://stackoverflow.com/questions/9035627/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

Melcus

10 years ago

Level 6

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))
   }

Please or to participate in this conversation.