Время

Пользовательский компонент BootstrapVue <b-time> создает виджет выбора времени, совместимый с WAI-ARIA, который можно использовать для управления другими компонентами или для создания настраиваемых входных данных для выбора времени.

Доступно в BootstrapVue с v2.6.0

Обзор

<b-time> совместим со специальными возможностями WAI-ARIA и оптимизирован для управления с клавиатуры (стрелка, страница вверх/вниз, главная и конечная клавиши). Также поддерживается интернационализация, и по умолчанию используется локаль браузера или страницы, если локали не указаны.

Если вам нужно средство выбора времени в качестве пользовательского элемента управления формой, вместо этого используйте компонент <b-form-timepicker>.

<template>
  <b-row>
    <b-col md="auto">
      <b-time v-model="value" locale="en" @context="onContext"></b-time>
    </b-col>
    <b-col>
      <p>Значение: <b>'{{ value }}'</b></p>
      <p class="mb-0">Context:</p>
      <pre class="small">{{ context }}</pre>
    </b-col>
  </b-row>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        context: null
      }
    },
    methods: {
      onContext(ctx) {
        this.context = ctx
      }
    }
  }
</script>

<!-- b-time.vue -->

Возвращаемое значение v-model

<b-time> всегда возвращает строку в формате HH:mm:ss, который является тем же форматом, который возвращается собственными элементами управления браузера <input type="time">. Значение будет находиться в диапазоне от '00:00:00' до '23:59:59' (24-часовой формат с использованием синтаксиса часового цикла 'h23')

Если время не выбрано, то <b-time> возвращает пустую строку ('').

Отключено и только для чтения

Установка параметра disabled удалит всю интерактивность компонента <b-time>. Установка свойства readonly отключит выбор времени, но сохранит фокус на вращающихся кнопках.

<template>
  <div>
    <b-form-group
      label="Select time interactive state"
      v-slot="{ ariaDescribedby }"
    >
      <b-form-radio-group
        v-model="state"
        :aria-describedby="ariaDescribedby"
        aria-controls="ex-disabled-readonly"
      >
        <b-form-radio value="disabled">Отключено</b-form-radio>
        <b-form-radio value="readonly">Только чтение</b-form-radio>
        <b-form-radio value="normal">Нормальное</b-form-radio>
      </b-form-radio-group>
    </b-form-group>

    <b-time
      id="ex-disabled-readonly"
      :disabled="disabled"
      :readonly="readonly"
    ></b-time>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        state: 'disabled'
      }
    },
    computed: {
      disabled() {
        return this.state === 'disabled'
      },
      readonly() {
        return this.state === 'readonly'
      }
    }
  }
</script>

<!-- b-time-disabled-readonly.vue -->

Стайлинг

Включение секундной кнопки

По умолчанию секундная кнопка не отображается. Чтобы включить раздел секунд, установите свойство show-seconds в значение true, чтобы активировать кнопку выбора секунд. Когда show-seconds равно false (или не указано), возвращаемое значение всегда будет иметь секундную часть строки времени, установленную на 00.

<template>
  <b-time v-model="value" show-seconds locale="en"></b-time>
  <div class="mt-2">Значение: '{{ value }}'</div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>

<!-- b-time-show-seconds.vue -->

Скрытие верхнего выбранного заголовка времени

По умолчанию текущее выбранное время будет отображаться в верхней части компонента времени в формате, соответствующем языку локали.

Вы можете скрыть этот заголовок с помощью параметра hide-header. Обратите внимание, что это только визуально скрывает выбранное время, оставляя его доступным для пользователей программ чтения с экрана в виде области aria-live.

Граница и отступы

Хотите контроль времени с рамкой с отступами? Используйте служебные классы Bootstrap border и padding, чтобы добавить границы и отступы:

<template>
  <b-time class="border rounded p-2" locale="ru"></b-time>
</template>

<!-- b-time-border-padding.vue -->

Слот по умолчанию

Предоставьте необязательный контент в нижней части интерфейса времени с помощью слота default. Слот можно использовать для добавления таких кнопок, как Now или Reset, и т.д.

<template>
  <b-time v-model="value" show-seconds locale="ru">
    <div class="d-flex" dir="ltr">
      <b-button
        size="sm"
        variant="outline-danger"
        v-if="value"
        @click="clearTime"
      >
        Очистить время
      </b-button>
      <b-button
        size="sm"
        variant="outline-primary"
        class="ml-auto"
        @click="setNow"
      >
        Установить сейчас
      </b-button>
    </div>
  </b-time>
</template>

<script>
  export default {
    data() {
      return {
        value: null
      }
    },
    methods: {
      setNow() {
        const now = new Date()
        // Grab the HH:mm:ss part of the time string
        this.value = now.toTimeString().slice(0, 8)
      },
      clearTime() {
        this.value = ''
      }
    }
  }
</script>

<!-- b-time-default-slot.vue -->

События

Событие input

Событие 'input' генерируется при обновлении v-model. Событие имеет единственный аргумент, который представляет собой выбранное время в виде строки. Значение представляет собой строку в формате 'HH:mm:ss' (или пустую строку, если время не выбрано). Допустимые значения находятся в диапазоне от '00:00:00' до 23:59:59'.

Если свойство show-seconds не установлено, доля секунд значения времени всегда будет равна '00'.

Если установлены свойства disabled или readonly, событие 'input' не генерируется.

Событие context

Событие 'context' генерируется всякий раз, когда пользователь выбирает время или пользователь изменяет значение одной из кнопок. Он также будет сгенерирован при создании компонента (непосредственно перед вставкой в DOM) или при изменении разрешенной локали.

Событие не будет генерироваться, когда установлены свойства disabled или readonly (за исключением начального генерирования при создании компонента времени).

Событию 'context' передается объект контекста в качестве единственного аргумента со следующими свойствами:

Свойство Описание
value Текущее значение в виде строки HH:mm:ss или пустой строки '', если время не выбрано
formatted Текущее значение, отформатированное в разрешенной локали, или значение свойства label-no-time, если время не выбрано
hours Текущий выбранный час (всегда 24 часа, формат h23') в виде числа или null, если час не указан
minutes Текущее выбранное значение минут в виде числа или null, если минут нет
seconds Текущее выбранное значение секунд в виде числа или null, если нет секунд
locale Языковой стандарт, определяемый средством выбора времени, он может отличаться от запрошенного языкового стандарта
isRTL Будет true, если локаль RTL (справа налево)
hour12 Логическое значение, указывающее, использует ли интерфейс 12-часовой формат
hourCycle Строка, представляющая тип часового цикла, используемый для кнопок вращения: 'h11', 'h12', 'h23' или 'h24'

Обратитесь к разделу интернационализации для получения информации о свойствах контекста locale, hour12 и hourCycle.

Интернационализация

Интернационализация интерфейса времени обеспечивается через Intl.DateTimeFormat и Intl.NumberFormat, за исключением меток, применяемых к элементам контроля времени (арии-метки, выбранный статус и т.д.). Вы должны предоставить свои собственные переводы для этих ярлыков. Доступные локали будут зависеть от браузера (не все браузеры поддерживают все локали).

По умолчанию <b-time> будет использовать локаль браузера по умолчанию, но вы можете указать локаль (или локали) для использования с помощью свойства locale. Свойство принимает либо одну строку локали, либо массив строк локали (перечисленных в порядке от наиболее предпочтительной локали до наименее предпочтительной).

Генерируемое событие 'context' будет включать в себя, к какой локали разрешен контроль времени (которая может не совпадать с запрошенной локалью, в зависимости от поддерживаемых локалей Intl).

Для рендеринга на стороне сервера (SSR) при использовании Node.js убедитесь, что используемая среда выполнения Node.js поддерживает Intl и локали, которые вы будете использовать. Подробности см. в документации поддержки Node Intl.

<template>
  <b-row>
    <b-col cols="12" class="mb-3">
      <label for="example-locales">Локаль:</label>
      <b-form-select id="example-locales" v-model="locale" :options="locales"></b-form-select>
    </b-col>
    <b-col md="auto">
      <b-time
        v-model="value"
        v-bind="labels[locale] || {}"
        :locale="locale"
        show-seconds
        @context="onContext"
      ></b-time>
    </b-col>
    <b-col>
      <p>Value: <b>'{{ value }}'</b></p>
      <p class="mb-0">Context:</p>
      <pre class="small">{{ context }}</pre>
   </b-col>
  </b-row>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        context: null,
        locale: 'ru-RU',
        locales: [
          { value: 'ru-RU', text: 'Russian (ru-RU)' },
          { value: 'en-US', text: 'English US (en-US)' },
          { value: 'de', text: 'German (de)' },
          { value: 'ar-EG', text: 'Arabic Egyptian (ar-EG)' },
          { value: 'zh', text: 'Chinese (zh)' }
        ],
        labels: {
          'ru-RU: {
            labelHours: 'Часы',
            labelMinutes: 'Минуты',
            labelSeconds: 'Секунды',
            labelIncrement: 'Приращение',
            labelDecrement: 'Уменьшение',
            labelSelected: 'Выбранное время',
            labelNoTimeSelected: 'Время не выбрано'
          },
          de: {
            labelHours: 'Stunden',
            labelMinutes: 'Minuten',
            labelSeconds: 'Sekunden',
            labelIncrement: 'Erhöhen',
            labelDecrement: 'Verringern',
            labelSelected: 'Ausgewählte Zeit',
            labelNoTimeSelected: 'Keine Zeit ausgewählt'
          },
          'ar-EG': {
            labelHours: 'ساعات',
            labelMinutes: 'الدقائق',
            labelSeconds: 'ثواني',
            labelAmpm: 'صباحا مساء',
            labelAm: 'ص',
            labelPm: 'م',
            labelIncrement: 'زيادة',
            labelDecrement: 'إنقاص',
            labelSelected: 'الوقت المحدد',
            labelNoTimeSelected: 'لا وقت المختار'
          },
          zh: {
            labelHours: '小时',
            labelMinutes: '分钟',
            labelSeconds: '秒',
            labelAmpm: '上午下午',
            labelAm: '上午',
            labelPm: '下午',
            labelIncrement: '增量',
            labelDecrement: '减量',
            labelSelected: '选定时间',
            labelNoTimeSelected: '没有选择时间'
          }
        }
      }
    },
    methods: {
      onContext(ctx) {
        this.context = ctx
      }
    }
  }
</script>

<!-- b-time-i18n.vue -->

Понимание hourCycle

Во всем мире используются 2 основных типа хронометража (часов): 12-часовой формат и 24-часовой формат. Свойство hourCycle позволяет вам получить доступ к типу часов, используемому конкретной локалью. Тип часового цикла может иметь несколько различных значений, которые перечислены в таблице ниже. hourCycle сигнализирует о том, как время '00:00:00' (начало дня) должно быть представлено/отформатировано для пользователя определенной локали. Событие'context' включает разрешенное значение hourCycle.

hourCycle Описание
'h12' Часовая система с использованием 112. 12-часовые часы с полуночью, начинающейся в 12:00
'h23' Часовая система с использованием 023. 24-часовой формат, с полуночью, начинающейся в 0:00
'h11' Часовая система с использованием 011. 12-часовые часы с полуночью, начинающейся в 0:00
'h24' Часовая система с использованием 124. 24-часовой формат, с полуночью, начинающейся в 24:00

Собственный HTML5 <input type="date"> возвращает значение времени в формате 'h23', а <b-time> также возвращает v-model в формате 'h23'. Это значение может отличаться от того, что представляется пользователю через графический интерфейс (кнопки прокрутки) компонента <b-time>, в зависимости от выбранной локали.

Примечание: IE 11 не поддерживает разрешение значения локали hourCycle, поэтому мы предполагаем либо h12 или h23 на основе разрешенного значения hour12.

Принудительный 12- или 24-часовой интерфейс

12-часовой ввод по сравнению с 24-часовым определяется языковым стандартом клиентских браузеров по умолчанию (или языковым стандартом, полученным из свойства locale). Чтобы принудительно использовать 12-часовой пользовательский интерфейс, установите для параметра hour12 значение true. Чтобы принудительно использовать 24-часовой пользовательский интерфейс, установите для параметра hour12 значение false. По умолчанию для свойства hour12 установлено значение null, которое использует разрешенную локаль, чтобы определить, какой интерфейс использовать.

Настройка свойства hour12 будет влиять на то, какой hourCycle разрешается для форматирования кнопки прокрутки часов. Обратите внимание, что хотя это может повлиять на формат кнопки прокручивания часов, но результат отформатированной строки времени может отображать формат 'h12 или 'h23' из-за ограничений в клиентской поддержке Intl.DateTimeFormat для конкретной локали. Поэтому рекомендуется оставить свойство hour12 равным null (по умолчанию), чтобы показать форматирование времени/часа по умолчанию в локали.

Доступность

<b-time> предоставляет множество специальных возможностей, таких как области aria-live, роли, метки aria, сочетания клавиш и полная навигация с помощью клавиатуры для работы с большинством программ чтения с экрана.

Клавиатурная навигация:

  • ArrowUp Увеличивает текущее значение выбранной кнопки вращения
  • ArrowDown Уменьшает текущее значение выбранной кнопки вращения
  • Home Устанавливает выбранную кнопку прокрутки на минимальное значение
  • End Устанавливает выбранную кнопку прокрутки на максимальное значение
  • PageUp Увеличивает значение выбранной кнопки на шаг кнопки на большее значение
  • PageDown Уменьшает значение выбранной кнопки на шаг кнопки на большее значение
  • ArrowRight Перемещает фокус на следующую кнопку вращения в компоненте
  • ArrowLeft Перемещает фокус на предыдущую кнопку прокрутки в компоненте

Некоторые свойства label-* не видны на экране, но используются для маркировки различных элементов в календаре для пользователей программ чтения с экрана. например свойство label-selected добавляется к элементу, отображающему выбранное значение.

При интернационализации средства выбора даты важно также обновить свойства label-* с соответствующими переведенными строками, чтобы пользователи программ чтения с экрана, использующие разные языки, слышали правильные подсказки и описания.

Замечания по реализации

Компонент <b-time> основан на пользовательском компоненте BootstrapVue <b-form-spinbutton>.

<b-time> использует служебные классы Bootstrap для границ и flex, а также классы кнопок (btn-*) и класс form-control. Пользовательский SCSS/CSS BootstrapVue также требуется для правильного стиля.

Смотрите также

Справочник по компонентам

<b-time>

v2.6.0+

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
(Click to sort ascending)
Тип
(Click to sort ascending)
По умолчанию
Описание
aria-labelledby
StringИдентификатор элемента, который предоставляет метку для этого компонента. Используется как значение атрибута `aria-labelledby`
disabled
BooleanfalseЕсли установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
footer-tag
v2.22.0+
String'footer'Укажите тег HTML для отображения вместо тега по умолчанию для футера
header-tag
v2.22.0+
String'header'Укажите тег HTML для отображения вместо тега по умолчанию для хедера
hidden
Booleanfalse
hide-header
BooleanfalseЕсли установлено, визуально скрывает выбранный заголовок времени
hour12
BooleannullСвойство с тремя состояниями. Если `true`, интерфейс переходит в 12-часовой формат. Если `false`, интерфейс переходит в 24-часовой формат. Если `null`, текущая локаль будет определять 12- или 24-часовой интерфейс (по умолчанию)
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
label-am
String'AM'Текст, отображаемый на кнопке прокрутки AM/PM при выборе «AM»
label-ampm
String'AM/PM'Значение атрибута `aria-label` на кнопке вращения `AM/PM`
label-decrement
String'Decrement'Значение атрибута `aria-label` на кнопке вращения spinbuttons `-`
label-hours
String'Hours'Значение атрибута `aria-label` на кнопке вращения `Hours`
label-increment
String'Increment'Значение атрибута `aria-label` на кнопке вращения `+`
label-minutes
String'Minutes'Значение атрибута `aria-label` на кнопке вращения `Minutes`
label-no-time-selected
String'No time selected'Строка для отображения, когда время не выбрано
label-pm
String'PM'Текст, отображаемый на кнопке прокрутки AM/PM при выборе «PM»
label-seconds
String'Seconds'Значение атрибута `aria-label` на кнопке вращения `Seconds`
label-selected
String'Selected time'Скрытая строка только для sr при выборе времени
locale
Array или StringЛокаль (или локали) для используемого компонента. При передаче массива локалей порядок локалей от наиболее предпочтительного к наименее предпочтительному. Если не указано, по умолчанию используется локаль клиента по умолчанию
minutes-step
Number или String1Значение шага для кнопки минут. Должно быть значение, равномерно разделенное на 60
readonly
BooleanfalseУстанавливает атрибут `readonly` в элементе управления формы
seconds-step
Number или String1Значение шага для кнопки секунд. Должно быть значение, равномерно разделенное на 60
show-seconds
BooleanfalseКогда `true`, показывает секундную кнопку. Если `false`, кнопка прокрутки секунд не будет отображаться, а секундная часть времени всегда будет `0`
value
v-model
String''Первоначально выбранное значение времени. Принимает строку `HH:mm:ss`. Допустимое значение находится в диапазоне от `00:00:00` до `23:59:59`

v-model

Свойство
Событие
valueinput

Слоты

Наименование
Описание
default Используется для размещения пользовательских элементов управления в нижней части компонента времени

События

Событие
Аргументы
Описание
context
  1. context - Объект контекста. Подробнее см. в документации
Генерируется всякий раз, когда обновляется внутреннее состояние модели или локаль. Также испускается при первоначальном создании компонента
input
  1. value - Выбранное время в виде строки `HH:mm:ss`. Будет пустой строкой, если время не выбрано
Событие, которое обновляет v-model

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент
Именованный экспорт
Путь импорта
<b-time>BTimebootstrap-vue

Пример:

import { BTime } from 'bootstrap-vue'
Vue.component('b-time', BTime)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт
Путь импорта
TimePluginbootstrap-vue

Пример:

import { TimePlugin } from 'bootstrap-vue'
Vue.use(TimePlugin)