Элементы

Дата и время

Текстовое поле «дд/мм/гггг чч:мм» со своим календарём; системное поле даты не используется.

Примеры

<div class="field">
  <label class="field__label" for="dt-start">Дата и время начала</label>
  <div class="dt" data-ui-datetime>
    <input class="field__input dt__input" type="text" id="dt-start" name="starts_local" value="25/12/2026 11:30" placeholder="дд/мм/гггг чч:мм" inputmode="numeric" maxlength="16" autocomplete="off" pattern="\d{2}[/.]\d{2}[/.]\d{4},? +\d{1,2}:\d{2}" title="дд/мм/гггг чч:мм, время в 24-часовом формате" data-ui-mask="datetime">
    <button class="dt__toggle" type="button" data-ui-datetime-toggle aria-label="Открыть календарь" aria-expanded="false" hidden>
      <svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true"><path d="M2 4h16v14H2zM2 8h16M6 2v4M14 2v4" fill="none" stroke="currentColor" stroke-width="2"/></svg>
    </button>
  </div>
  <span class="field__hint">Необязательно. Формат: дд/мм/гггг чч:мм, 24 часа.</span>
</div>

Установка

bukatchuk-ui add datetime

Файлы

Клавиши

Вставка для Jekyll

{%- comment -%}
  Поле «дата и время» с календарём. Параметры: name, label, value, hint.
{%- endcomment -%}
<div class="field">
  <label class="field__label" for="dt-{{ include.name }}">{{ include.label }}</label>
  <div class="dt" data-ui-datetime>
    <input class="field__input dt__input" type="text" id="dt-{{ include.name }}" name="{{ include.name }}" value="{{ include.value }}" placeholder="дд/мм/гггг чч:мм" inputmode="numeric" maxlength="16" autocomplete="off" data-ui-mask="datetime">
    <button class="dt__toggle" type="button" data-ui-datetime-toggle aria-label="Открыть календарь" aria-expanded="false" hidden>
      <svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true"><path d="M2 4h16v14H2zM2 8h16M6 2v4M14 2v4" fill="none" stroke="currentColor" stroke-width="2"/></svg>
    </button>
  </div>
  {%- if include.hint %}<span class="field__hint">{{ include.hint }}</span>{% endif %}
</div>

Макрос для Jinja

{#- Поле «дата и время» с календарём. Значение в формате дд/мм/гггг чч:мм. -#}
{% macro datetime(name, label, value='', hint='', id=None) -%}
{%- set fid = id or ('dt-' ~ name) -%}
<div class="field">
  <label class="field__label" for="{{ fid }}">{{ label }}</label>
  <div class="dt" data-ui-datetime>
    <input class="field__input dt__input" type="text" id="{{ fid }}" name="{{ name }}" value="{{ value }}" placeholder="дд/мм/гггг чч:мм" inputmode="numeric" maxlength="16" autocomplete="off" pattern="\d{2}[/.]\d{2}[/.]\d{4},? +\d{1,2}:\d{2}" title="дд/мм/гггг чч:мм, время в 24-часовом формате" data-ui-mask="datetime">
    <button class="dt__toggle" type="button" data-ui-datetime-toggle aria-label="Открыть календарь" aria-expanded="false" hidden>
      <svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true"><path d="M2 4h16v14H2zM2 8h16M6 2v4M14 2v4" fill="none" stroke="currentColor" stroke-width="2"/></svg>
    </button>
  </div>
  {%- if hint %}<span class="field__hint">{{ hint }}</span>{% endif %}
</div>
{%- endmacro %}