vue.js - 如何更改 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") : "";
 }
}