Время

Обзор

<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>''</b></p>
      <p class="mb-0">Context:</p>
      <pre class="small"></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">Значение: ''</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' передается объект контекста в качестве единственного аргумента со следующими свойствами:

Обратитесь к разделу интернационализации для получения информации о свойствах контекста 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>''</b></p>
      <p class="mb-0">Context:</p>
      <pre class="small"></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.

Собственный 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-form-timepicker> Ввод пользовательской формы выбора времени
• <b-calendar> Виджет выбора даты календаря
• <b-form-datepicker> Ввод пользовательской формы выбора даты