Date

Import Permalink to "Import"

import ProximaDate from 'proxima-vue/field/date';

Playground Permalink to "Playground"

import { ref } from 'vue';
import ProximaDate from 'proxima-vue/field/date';

const value = ref('');

<ProximaDate
  label="Birthday"
  v-model="value"
/>

Format Permalink to "Format"

По умолчанию формат зависит от выбранной локализации, но вы можете напрямую указать нужный формат, например ISO 8601: By default, the format depends on the selected localization, but you can directly specify the desired format, for example ISO 8601:

<ProximaDate
  format="yyyy-mm-dd"
  validity-status="both"
  width="12"
/>

Min and max Permalink to "Min and max"

Вы можете указать минимальную и максимальную дату, если значение будет выходить за эти рамки, то поле будет считаться невалидным, вы можете передать строку с датой или now: You can specify the minimum and maximum date values. If the value falls beyond these limits, the field will be considered invalid. You can pass a string with date or now:

<ProximaDate
  format="yyyy-mm-dd"
  validity-status="both"
  width="12"
  min="2022-01-01"
  max="now"
/>

Parser Permalink to "Parser"

Поле умеет парсить текстовые даты на разных языках, вы можете скопировать и вставить текст с датой или нажать на кнопку: The field can parse text dates in different languages. You can copy and paste the text with date or click on the button:

<ProximaDate
  format="yyyy-mm-dd"
  validity-status="both"
  width="12"
  has-clear-button
  actions-visibility="always"
  v-model="value"
/>

<button
  type="button"
  v-text="'10 December 1815'"
  @click="value = '10 December 1815'"
/>

import { ref } from 'vue';
import ProximaDate from 'proxima-vue/field/date';

const value = ref('');

Mask char Permalink to "Mask char"

Вы можете указать свой символ для маски: You can specify your own placeholder symbol for the mask:

<ProximaDate
  width="12"
  mask-char="*"
  format="yyyy-mm-dd"
  validity-status="both"
/>

<ProximaDate
  width="12"
  mask-char="_"
  format="mm/dd/yyyy"
  validity-status="both"
/>

Blink Permalink to "Blink"

По умолчанию при вводе недопустимого символа фон поля мерцает красным цветом, вы можете задать другой цвет или отключить анимацию вовсе: By default, when you enter an invalid character, the field's background blink red. You can set a different color or disable the animation altogether:

:root {
  --field-blink-rgb: 255, 0, 0;
  --field-blink-rgb-opacity: 0.15;
}

<ProximaDate
  :has-invalid-blink="false"
/>

Unexpected Permalink to "Unexpected"

Поле имеет отдельное событие при вводе недопустимого символа: The field triggers a custom event when an invalid character is entered:

<ProximaDate
  :has-invalid-blink="false"
  @unexpected:input="onUnexpectedInput"
/>

const onUnexpectedInput = (event) => {
  alert(`Unexpected char: ${event.inputData}`);
};

CSS Permalink to "CSS"

--field-mask-color: var(--field-placeholder-color);
--field-invalid-mask-color: color-mix(
  in srgb, var(--field-invalid-color), #fff 50%
);

Locale Permalink to "Locale"

Компонент использует токены локализации: The component uses localization tokens:

{
  fieldUnexpectedUseNumber: "Invalid character, use numbers",
  fieldBadDate: "Date does not match format: {format}",
  fieldIsoDate: "year month day",
  fieldBadMonth: "The month is entered incorrectly, it should be from 01 to 12, now: {month}",
  fieldBadDay: "The day is entered incorrectly, it should be from 01 to {max}, now: {day}",
  fieldDateUnderflow: "The earliest date to accept: {date}",
  fieldDateOverflow: "The latest date to accept: {date}",
}

Expose Permalink to "Expose"

Поле поддерживает все методы текстового поля и функцию возврата даты в формате ISO: The field supports all text field methods and is able to return an ISO date:

<ProximaDate
  ref="field"
  format="mm/dd/yyyy"
  v-model="value"
/>

import { ref, unref, onMounted } from 'vue';
import ProximaDate from 'proxima-vue/field/date';

const field = ref({} as InstanceType<typeof ProximaDate>);
const value = ref('04/15/1992');

onMounted(() => {
  unref(field).getISOString(); // 1992-04-15
});

Extends Permalink to "Extends"

Данный компонент основан на текстовом поле и поддерживает его пропсы, события, слоты, БЭМ модификаторы и кастомные свойства. This component is based on a text field and supports its props, events, slots, BEM modifiers and custom properties.