Datepicker VueJS, исправьте визуализацию, но не отправляйте в том же формате

Question

Мы используем плагин datepicker, но мы увидели, что он визуализируется в правильном формате даты, но отправляется на сервер / БД в формате по умолчанию для datepicker.

<datepicker
  v-model="model.date"
  placeholder="Choose date"
  :format="DatePickerFormat"
  id="date"
  name="date">
</datepicker>

<script>
import Datepicker from 'vuejs-datepicker'

export default {
  components: {
     Datepicker
  }
data() {
    return {
       DatePickerFormat: 'dd/MM/yyyy',
       model: {
        date: ''
      }
    }
  }
}
</script>

В поле ввода отображается правильно, но когда данные отправляются нажатием кнопки Сохранить, формат равен date: "2018-06-27T10:34:09.502Z" Как я могу стандартизировать оба формата в «ДД / ММ / ГГГГ»?

Answer 1

Вы не определили DatePickerFormat внутри data, вы определили его как пользовательское свойство .

Для доступа к нему вы должны использовать $opptions.DatePickerFormat.

Так что измените :format="DatePickerFormat" на

:format="$options.DatePickerFormat"

Или определите его в опции data как

data() {
    return {
       model: {
        date: ''
      },
      DatePickerFormat: 'dd/MM/yyyy'
    }
  }