Time picker — OutfitKit

Time picker

Selector de hora 24h con dos columnas (hora · minuto). Minutos discretos por defecto (00, 15, 30, 45).

Default 07–14h · 00/15/30/45

<div class="timepicker">
  <div class="timepicker-col">
    <button type="button" class="timepicker-opt"
      >07</button>
    <button type="button" class="timepicker-opt"
      >08</button>
    <button type="button" class="timepicker-opt"
      aria-selected="true">09</button>
    <button type="button" class="timepicker-opt"
      >10</button>
    <button type="button" class="timepicker-opt"
      >11</button>
    <button type="button" class="timepicker-opt"
      >12</button>
    <button type="button" class="timepicker-opt"
      >13</button>
    <button type="button" class="timepicker-opt"
      >14</button>
  </div>
  <div class="timepicker-col">
    <button type="button" class="timepicker-opt"
      >00</button>
    <button type="button" class="timepicker-opt"
      >15</button>
    <button type="button" class="timepicker-opt"
      aria-selected="true">30</button>
    <button type="button" class="timepicker-opt"
      >45</button>
  </div>
</div>

{% from "timepicker.jinja" import timepicker %}
{{ timepicker(hour=9, minute=30) }}

<Timepicker hour="9" minute="30" />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Apertura local · 06–22h cada 30min

<div class="timepicker">
  <div class="timepicker-col">
    <button type="button" class="timepicker-opt"
      >06</button>
    <button type="button" class="timepicker-opt"
      >07</button>
    <button type="button" class="timepicker-opt"
      aria-selected="true">08</button>
    <button type="button" class="timepicker-opt"
      >09</button>
    <button type="button" class="timepicker-opt"
      >10</button>
    <button type="button" class="timepicker-opt"
      >11</button>
    <button type="button" class="timepicker-opt"
      >12</button>
    <button type="button" class="timepicker-opt"
      >13</button>
    <button type="button" class="timepicker-opt"
      >14</button>
    <button type="button" class="timepicker-opt"
      >15</button>
    <button type="button" class="timepicker-opt"
      >16</button>
    <button type="button" class="timepicker-opt"
      >17</button>
    <button type="button" class="timepicker-opt"
      >18</button>
    <button type="button" class="timepicker-opt"
      >19</button>
    <button type="button" class="timepicker-opt"
      >20</button>
    <button type="button" class="timepicker-opt"
      >21</button>
    <button type="button" class="timepicker-opt"
      >22</button>
  </div>
  <div class="timepicker-col">
    <button type="button" class="timepicker-opt"
      aria-selected="true">00</button>
    <button type="button" class="timepicker-opt"
      >30</button>
  </div>
</div>

{% from "timepicker.jinja" import timepicker %}
{{ timepicker(hours=range(6, 23) | list, minutes=[0, 30], hour=8, minute=0) }}

<Timepicker hours="range(6, 23) | list" minutes="[0, 30]" hour="8" minute="0" />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Sin selección

<div class="timepicker">
  <div class="timepicker-col">
    <button type="button" class="timepicker-opt"
      >07</button>
    <button type="button" class="timepicker-opt"
      >08</button>
    <button type="button" class="timepicker-opt"
      >09</button>
    <button type="button" class="timepicker-opt"
      >10</button>
    <button type="button" class="timepicker-opt"
      >11</button>
    <button type="button" class="timepicker-opt"
      >12</button>
    <button type="button" class="timepicker-opt"
      >13</button>
    <button type="button" class="timepicker-opt"
      >14</button>
  </div>
  <div class="timepicker-col">
    <button type="button" class="timepicker-opt"
      >00</button>
    <button type="button" class="timepicker-opt"
      >15</button>
    <button type="button" class="timepicker-opt"
      >30</button>
    <button type="button" class="timepicker-opt"
      >45</button>
  </div>
</div>

{% from "timepicker.jinja" import timepicker %}
{{ timepicker() }}

<Timepicker />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`hours`	list[int]	7–14	Horas disponibles.
`minutes`	list[int]	[0,15,30,45]	Minutos discretos.
`hour`	int	None	Hora seleccionada.
`minute`	int	None	Minuto seleccionado.
`attrs`	dict	None	Atributos extra.