Как в Bootstrap-vue в компоненте datepicker Button only mod поменять формат вывода даты в b-form-input на dd.mm.yyyy?

Question

<label for="date">Дата:</label>
          <b-input-group>
            <b-form-input
              id="datepicker"
              v-model="$v.list_of_limit.limit_date.$model"
              type="text"
              autocomplete="off"
              size="sm"
              locale='ru'
              :state="validateState('limit_date')"
            ></b-form-input>
            <b-input-group-append>
            <b-form-datepicker
              :disabled="!isDataFormEmpty"
              aria-controls="datepicker"
              v-model="
                $v.list_of_limit.limit_date.$model
              "
              required
              :min="dateConstraints.min"
              size="sm"
              :date-format-options="{
                year: 'numeric',
                month: 'numeric',
                day: 'numeric',
              }"
              button-only
              locale='ru'
              :state="validateState('limit_date')"
            ></b-form-datepicker>
            </b-input-group-append>
            <b-form-invalid-feedback :state="validateState('limit_date')">
              Дата в формате ГГГГ-ММ-ДД должна быть не раньше текущей.
            </b-form-invalid-feedback>
          </b-input-group>

текущий вид даты YYYY-MM-DD Так как и инпут и датапикер сохраняются в одну переменную, возможет ли иной вывод формата даты? у бутстрапа есть только два варианта формата сохранения - это либо объект Date, либо YMD. Это возможно как-то обойти? Хотелось бы добиться отображения dd.mm.yyyy с возможностью ручного ввода и редактирования даты.

Answer 1

<b-input-group>
            <b-form-input
              :disabled="!isDataFormEmpty"
              @change.native="setDataPicker('limit_date')"
              id="datepicker"
              v-model="$v.list_of_limit.limit_date.$model"
              v-mask="'##.##.####'"
              type="text"
              placeholder="ДД-ММ-ГГГГ"
              autocomplete="off"
              size="sm"
              locale='ru'
              :state="validateState('limit_date')"
            ></b-form-input>
            <b-input-group-append>
            <b-form-datepicker
              @input="onChangeDateFormat('limit_date')"
              aria-controls="datepicker"
              v-model="datepicker.limit_date"
              required
              :min="dateConstraints.min"
              size="sm"
              button-only
              locale='ru'
            ></b-form-datepicker>
            </b-input-group-append>

этого можно добиться с помощью библиотеки moment.js

setDataPicker(key) {
  this.datepicker[key] = moment(this.list_of_limit[key], 'DD.MM.YYYY').format('YYYY-MM-DD');
},

onChangeDateFormat(key) {
  const date = moment(this.datepicker[key]).format("DD.MM.YYYY")
  this.list_of_limit[key] = date;
},

БЛОГ НА HUSL

Как в Bootstrap-vue в компоненте datepicker Button only mod поменять формат вывода даты в b-form-input на dd.mm.yyyy?

Ответы (1 шт):