TimePicker

TimePicker компонент для введення часу

Звичний вибір часу

Ви можете вибрати час за допомогою введеню даних в інпут або панелі вибору часу

Composition APIOptions API

vue

<template>
  <AppTimePicker v-model="model" placeholder="Виберіть час" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const model = ref(null);
</script>

vue

<template>
  <AppTimePicker v-model="model" placeholder="Виберіть час" />
</template>

<script>
export default {
  data() {
    return {
      model: null,
    };
  },
};
</script>

Вибір часового діапазону

За допомогою атрибута is-range пікер почне працювати в режимі вибору часового діапазону

ПІДКАЗКА

Зверніть увагу, що якщо ви не використовуєте атрибут selectable-range і якщо встановлено атрибут is-range="true", пікер автоматично визначить допустимий діапазон на основі вибраних даних.

Composition APIOptions API

vue

<template>
  <AppTimePicker
    v-model="model"
    is-range
    start-placeholder="Початковий час"
    end-placeholder="Кінцевий час"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const model = ref(null);
</script>

vue

<template>
  <AppTimePicker
    v-model="model"
    is-range
    start-placeholder="Початковий час"
    end-placeholder="Кінцевий час"
  />
</template>

<script>
export default {
  data() {
    return {
      model: null,
    };
  },
};
</script>

Час за замовчуванням

У пікері ви можете встановити час, який буде підставлятися за замовчуванням, коли користувач відкриває його вперше. Ви можете налаштувати як для одного пікера, так і для кожного пікера окремо.

Composition APIOptions API

vue

<template>
  <AppTimePicker
    v-model="modelFirst"
    :default-time="defaultTime"
    placeholder="Виберіть час"
  />

  <AppTimePicker
    v-model="modelLast"
    is-range
    :default-time="defaultTimeRange"
    start-placeholder="Початковий час"
    end-placeholder="Кінцевий час"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const modelFirst = ref(null);
const modelLast = ref(null);

const defaultTime = setTime(15, 30, 30);

const defaultTimeRange = [setTime(12, 0, 30), setTime(17, 28, 30)];

function setTime(hours: number, minutes: number, seconds: number): Date {
  const now = new Date();

  now.setHours(hours);
  now.setMinutes(minutes);
  now.setSeconds(seconds);

  return now;
}
</script>

vue

<template>
  <AppTimePicker
    v-model="modelFirst"
    :default-time="defaultTime"
    placeholder="Виберіть час"
  />

  <AppTimePicker
    v-model="modelLast"
    is-range
    :default-time="defaultTimeRange"
    start-placeholder="Початковий час"
    end-placeholder="Кінцевий час"
  />
</template>

<script>
export default {
  data() {
    return {
      modelFirst: null,
      modelLast: null,
    };
  },
  computed: {
    defaultTime() {
      return setTime(15, 30, 30);
    },
    defaultTimeRange() {
      return [setTime(12, 0, 30), setTime(17, 28, 30)];
    },
  },
  methods: {
    setTime(hours, minutes, seconds) {
      const now = new Date();

      now.setHours(hours);
      now.setMinutes(minutes);
      now.setSeconds(seconds);

      return now;
    },
  },
};
</script>

Часовий пояс

Атрибут timezone використовується для корекції часу в пікері

ПОПЕРЕДЖЕННЯ

Об'єкт Date завжди залишається в локальному часовому поясі

Коли вибрано дату, компонент атоматично обчислює різницю між локальним часовим поясом користувача і часовим поясом, зазначеним у timezone, і додає або віднімає її від часу вибраної дати для остаточного відображення.

Те ж саме відбувається, коли користувач вперше вибирає дату, тільки в цьому випадку дата повертається, приведена до місцевого часу користувача

ІНФОРМАЦІЯ

Обраний часовий пояс: America/New_York

Ваш місцевий час: Sat Apr 26 2025 16:22:41 GMT+0000 (Coordinated Universal Time)

Composition APIOptions API

vue

<template>
  <AppTimePicker v-model="model" timezone="America/New_York" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const model = ref(null);
</script>

vue

<template>
  <AppTimePicker v-model="model" timezone="America/New_York" />
</template>

<script>
export default {
  data() {
    return {
      model: new Date(),
    };
  },
};
</script>

Формати

Ви можете налаштувати формат, в якому буде відображатися дата в інпуті. Також, на відміну від DateTimePicker, формат впливає на відображення панелей у поповері.

ПІДКАЗКА

Щоб дізнатися більше про доступні формати, перейдіть за цим посиланням

Відображення тільки годин і хвилин:

Відображення часу з AM\PM:

Composition APIOptions API

vue

<template>
  <AppTimePicker v-model="modelFirst" format="HH:mm" placeholder="HH:mm" />

  <AppTimePicker v-model="modelLast" format="hh:mm:ss a" placeholder="HH:mm" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const modelFirst = ref(null);
const modelLast = ref(null);
</script>

vue

<template>
  <AppTimePicker v-model="modelFirst" format="HH:mm" placeholder="HH:mm" />

  <AppTimePicker v-model="modelLast" format="hh:mm:ss a" placeholder="HH:mm" />
</template>

<script>
export default {
  data() {
    return {
      modelFirst: null,
      modelLast: null,
    };
  },
};
</script>

Обмеження часового діапазону

За допомогою атрибута selectable-range ви можете обмежити вибір часу для користувача. Цей атрибут працює для пікера у звичайному режимі та при виборі діапазону.

ПОПЕРЕДЖЕННЯ

Атрибут має строгий формат, а саме 'HH:mm:ss - HH:mm:ss', а для режиму вибору діапазону [‘HH:mm:ss - HH:mm:ss’, ‘HH:mm:ss - HH:mm:ss’].

ІНФОРМАЦІЯ

Якщо пікер не має початкового значення і налаштовано атрибут selectable-range, то час, який буде вибрано за замовчуванням (поточний час або час, який було передано в атрибуті default-time), буде визначено відносно атрибуту selectable-range.

Якщо поточний час менший за початковий, буде обрано початковий час
Якщо поточний час більший за кінцевий час, буде обрано кінцевий час
Якщо поточний час знаходиться в діапазоні, тоді буде обрано його

Composition APIOptions API

vue

<template>
  <AppTimePicker
    v-model="modelFirst"
    selectable-range="12:30:30 - 16:00:00"
    placeholder="Виберіть час"
  />

  <AppTimePicker
    v-model="modelLast"
    is-range
    :selectable-range="['12:30:30 - 16:00:00', '12:00:30 - 14:30:00']"
    start-placeholder="Початковий час"
    end-placeholder="Кінцевий час"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const modelFirst = ref(null);
const modelLast = ref(null);
</script>

vue

<template>
  <AppTimePicker
    v-model="modelFirst"
    selectable-range="12:30:30 - 16:00:00"
    placeholder="Виберіть час"
  />

  <AppTimePicker
    v-model="modelLast"
    is-range
    :selectable-range="['12:30:30 - 16:00:00', '12:00:30 - 14:30:00']"
    start-placeholder="Початковий час"
    end-placeholder="Кінцевий час"
  />
</template>

<script>
export default {
  data() {
    return {
      modelFirst: null,
      modelLast: null,
    };
  },
};
</script>

API

Атрибути

Назва	Опис	Тип	За замовчуванням
v-model / model-value	значення прив'язки, якщо це масив, то довжина повинна бути 2	`null` / `Date` / `object`	null
is-range	чи відображати пікер у режимі вибору часового діапазону	`boolean`	false
time-format	формат, в якому буде відображатися час у пікері, а також відповідні панелі у поповері. більше	`string`	HH:mm:ss
default-time	час, який буде встановлено за замовчуванням. більше	`object`	new Date()
selectable-range	обмеження на вибір часу. Очікуваний формат `"HH:mm:ss - HH:mm:ss"` `["HH:mm:ss - HH:mm:ss","HH:mm:ss - HH:mm:ss"]`. більше	`string` / `object`	"
auto-apply ^0.2.0	застосування змін без натискання кнопки "Застосувати"	`boolean`	false
disabled	чи заблокований пікер	`boolean`	false
readonly	чи пікер доступний тільки для читання	`boolean`	false
input-readonly ^0.0.2	перевести інпут в режим read-only, але через поповер є можливість обирати дату	`boolean`	false
clearable	відображення контролера для очищення входу даних, коли він переповнений	`boolean`	false
timezone	який часовий пояс буде використовуватися для корекції дати. більше	`string`	"
placeholder	заповнювач, який буде відображатися в інпуті, коли пікер працює в одиночному режимі	`string`	"
start-placeholder	заповнювач, який буде відображено у першому інпуті, коли пікер працює у режимі діапазону	`string`	"
end-placeholder	заповнювач, який буде відображено у останньому інпуті, коли пікер працює у режимі діапазону	`string`	"
align	положення поповера	`string`	`left`
start-id ^0.2.0	id для першого нативного інпута (також використовується для нативного інпута, якщо він лише один)	`string`	"
end-id ^0.2.0	id для останнього нативного інпута	`string`	"
start-name ^0.2.0	атрибут name для першого нативного інпута (також використовується для нативного інпута, якщо він лише один)	`string`	"
end-name ^0.2.0	атрибут name для останнього нативного інпута	`string`	"
apply-text	текст, що відображається в кнопці застосувати у поповері	`string`	"Apply"
cancel-text	текст, що відображається в кнопці скасування у поповері	`string`	"Cancel"
invalid	пікер має невірне значення	`boolean`	false
z-index ^0.3.0	z-index для вмісту поповера	`number`	1000
client-only-popover-content ^0.3.0	Відображати вміст поповеру всередині компонента. (Працює лише в режимі SSR)	`boolean`	false
open-delay	затримка в мілісекундах перед відкриттям поповера	`number`	0
close-delay	затримка в мілісекундах перед закриттям поповера	`number`	150
append-to-body	визначає, чи слід додавати вміст спливаючого вікна до `body` замість того, щоб вкладати його в структуру DOM компонента.	`boolean`	true
stay-opened	залишайте пікап відкритим після відкриття. Використовуйте його для налагодження або дослідження поповера	`boolean`	false

Події

Назва	Опис	Тип
change	спрацьовує при зміні значення	`Function`
focus	спрацьовує, коли пікер знаходиться в фокусі	`Function`
blur	спрацьовує, коли пікер перестає бути в фокусі	`Function`

Слоти

Назва	Опис
default	кастомне посилання для поповера
separator	кастомний вміст роздільника діапазону

Слоти ^0.0.2

Цей слот замінює поле введення дати. Нижче наведено таблицю з доступними пропсами для цього слоту

Назва	Опис	Тип
value	Значення, яке передається в поле введення (без форматування)	`null` / `Date` / `object`
popoverVisible	повертає, чи відкритий поповер в даний момент чи ні	boolean
input	встановлення нового значення в пікері	`Function`
blur	прибрати фокус з пікера	`Function`
focus	виконати фокус на пікер	`Function`

Composition APIOptions API

vue

<template>
  <AppTimePicker v-model="model">
    <template #default="{ value, popoverVisible, input, focus }">
      <input
        :value="dateToStringTime(value)"
        :class="{ 'custom-input--focus': popoverVisible }"
        class="custom-input"
        placeholder="Виберіть час"
        @focus="focus"
        @input="event => stringDateToDate(event, input)"
      />
    </template>
  </AppTimePicker>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { format, isDate, parse } from 'date-fns';

const model = ref(null);

const timeFormat = 'HH:ss:mm';

function dateToStringTime(value: Date | null) {
  if (!value || !isDate(value)) return '';

  return format(value, timeFormat);
}

function stringDateToDate(event: InputEvent, cb: (value: unknown) => void) {
  const value = (event.target as HTMLInputElement).value;

  const parsed = parse(value, timeFormat, new Date());

  if (!value) {
    cb(null);
  }

  if (value.length === timeFormat.length && isDate(parsed)) {
    cb(parsed);
  }
}
</script>

<style lang="scss" scoped>
.custom-input {
  width: 100%;
  border: 1px solid;

  &:focus,
  &--focus {
    border-color: blue;
  }
}
</style>

vue

<template>
  <AppTimePicker v-model="model">
    <template #default="{ value, popoverVisible, input, focus }">
      <input
        :value="dateToStringTime(value)"
        :class="{ 'custom-input--focus': popoverVisible }"
        class="custom-input"
        placeholder="Виберіть час"
        @focus="focus"
        @input="event => stringDateToDate(event, input)"
      />
    </template>
  </AppTimePicker>
</template>

<script>
export default {
  data() {
    return {
      model: null,
      timeFormat: 'HH:ss:mm',
    };
  },
  methods: {
    dateToStringTime(value) {
      if (!value || !isDate(value)) return '';

      return format(value, this.timeFormat);
    },

    stringDateToDate(event, cb) {
      const value = event.target.value;

      const parsed = parse(value, this.timeFormat, new Date());

      if (!value) {
        cb(null);
      }

      if (value.length === this.timeFormat.length && isDate(parsed)) {
        cb(parsed);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-input {
  width: 100%;
  border: 1px solid;

  &:focus,
  &--focus {
    border-color: blue;
  }
}
</style>

Доступні властивості компонента

Назва	Опис	Тип
popoverVisible	повертає, чи відкрито спливаюче вікно в даний момент чи ні	`object`
focus	виконати фокус на пікер	`Function`
blur	прибрати фокус з пікера	`Function`

TimePicker ​

Звичний вибір часу ​

Вибір часового діапазону ​

Час за замовчуванням ​

Часовий пояс ​

Формати ​

Обмеження часового діапазону ​

API ​

Атрибути ​

Події ​

Слоти ​

Слоти ^0.0.2​

Доступні властивості компонента ​

TimePicker

Звичний вибір часу

Вибір часового діапазону

Час за замовчуванням

Часовий пояс

Формати

Обмеження часового діапазону

API

Атрибути

Події

Слоти

Слоти ^0.0.2

Доступні властивості компонента