FormDate

Поле выбора даты на базе FormField и DatePicker из Ant Design Vue. Один prop type переключает одиночный выбор, диапазон и ввод времени.

Привязка к модели формы

Если данный компонен расположен внутри Form достаточно указать name:, отдельный v-model не требуется.

Подробнее — в документации Form.

Дата:

Дата и время:

Период:

Период с временем:

<FormDate v-model:value="model.date" type="date" />
<FormDate v-model:value="model.datetime" type="datetime" />
<FormDate v-model:value="model.dateRange" type="date-range" />
<FormDate v-model:value="model.datetimeRange" type="datetime-range" />

Режимы

type	Компонент	Время
date	DatePicker	Нет
datetime	DatePicker	Да
date-range	RangePicker	Нет
datetime-range	RangePicker	Да

Значение по умолчанию — date. В режиме диапазона placeholder принимает пару строк: ['Начало', 'Конец'].

Формат значения

По умолчанию Ant Design Vue возвращает объекты Dayjs. Чтобы хранить строки, передайте valueFormat соответствующему picker:

<FormDate
  v-model:value="model.date"
  type="date"
  :date-picker-props="{ valueFormat: 'YYYY-MM-DD' }"
/>

<FormDate
  v-model:value="model.period"
  type="datetime-range"
  :range-picker-props="{ valueFormat: 'YYYY-MM-DD HH:mm:ss' }"
/>

Настройка и события

formItemProps и alertProps настраивают общую оболочку поля. datePickerProps применяется к одиночным режимам, rangePickerProps — к диапазонам. Выбранный type всегда имеет приоритет над вложенным showTime.

Компонент поддерживает v-model:value, события update:value и change, слоты label, description, dateRender, renderExtraFooter, suffixIcon, а также методы focus() и blur() через template ref.