How to change Vue2 date range picker selected dates format?

Question

I am using Vue2 date range picker (https://innologica.github.io/vue2-daterange-picker/#example-playground) and have a following problem

Have a problem with the selected date values display format.

The problem is, that when I select date values, the input displays them by this format:

I want to achieve a result of when dates are selected:

Vue component:

    <date-range-picker
        ref="picker"
        opens="center"
        :locale-data="locale"
        :maxDate="maxDate"
        v-model="dateRange"
        @update="update"
    >
      <div slot="input" slot-scope="picker">{{ dateRange.startDate}} - {{ 
         dateRange.endDate}}</div>
    </date-range-picker>

data: () => ({
maxDate: moment().format('YYYY-MM-DD'),
dateRange: {
  startDate: moment().format('YYYY-MM-DD'),
  endDate: moment().format('YYYY-MM-DD'),
},
locale: {
  direction: 'ltr', //direction of text
  format: 'mm/dd/yyyy',
  separator: ' - ', //separator between the two ranges
  applyLabel: 'Apply',
  cancelLabel: 'Cancel',
  weekLabel: 'W',
  customRangeLabel: 'Custom Range',
  daysOfWeek: moment.weekdaysMin(), //array of days - see moment documenations for details
  monthNames: moment.monthsShort(), //array of month names - see moment documenations for details
  firstDay: 1 //ISO first day of week - see moment documenations for details
}

}),

Have been reading the docs and searching for answers, but couldn't find a solution.

How could I format the selected date values by given example?

Answer 1

You need to add filter date inside the slot input to achieve your result.

Vue Component:

<date-range-picker
    ref="picker"
    opens="center"
    :locale-data="locale"
    :maxDate="maxDate"
    v-model="dateRange"
    @update="update"
>
  <div slot="input" slot-scope="picker">{{ dateRange.startDate | date }} - {{ 
     dateRange.endDate | date }}</div>
</date-range-picker>

Below your data

filters: {
  date(val) {
   return val ? moment(val).format("YYYY-MM-DD") : "";
 }
}