如何更改Vue2日期范围选择器选择的日期格式？

Question

我正在使用Vue2日期范围选择器（https://innologica.github.io/vue2-daterange-picker/#example-playground），并且遇到以下问题

所选日期值显示格式存在问题。

问题是，当我选择日期值时，输入将按以下格式显示它们：

我想获得选择日期的结果：

Vue组件：

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

}），

一直在阅读文档并寻找答案，但是找不到解决方案。

如何通过给定的示例格式化选定的日期值？

Answer 1

您需要在广告位输入中添加过滤日期以实现结果。

Vue组件：

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

在您的数据下方

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