Pleasance Styleguide

Time select group 

<div class="time-select-group">
    <label for="time-select-group" class="form-label">Time</label>
    <div class="container-fluid">
        <div id="time-select-group" class="row">
            <div class="col-6 p-0 pe-1">
                <div>
                    <select id="radio" name="radio" class="form-select" aria-label="Time (hour)">
                        <option selected>--</option>
                        <option value="0">00</option>
                        <option value="1">01</option>
                        <option value="2">02</option>
                        <option value="3">03</option>
                        <option value="4">04</option>
                        <option value="5">05</option>
                        <option value="6">06</option>
                        <option value="7">07</option>
                        <option value="8">08</option>
                        <option value="9">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                    </select>
                </div>
            </div>
            <div class="col-6 p-0 ps-1">
                <div>
                    <select id="radio" name="radio" class="form-select" aria-label="Time (minute)">
                        <option selected>--</option>
                        <option value="0">00</option>
                        <option value="15">15</option>
                        <option value="30">30</option>
                        <option value="45">45</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% set hour_options = [] %}
{% set minute_options = [] %}

{% for i in range(0, 23) %}
{% set hour_options = hour_options|merge([
  {
    "value": i,
    "text": "%02d" | format(i)
  }
]) %}
{% endfor %}

{% for i in range(0, (60 / step) - 1) %}
{% set minute_options = minute_options|merge([
  {
    "value": i * step,
    "text": "%02d" | format(i * step)
  }
]) %}
{% endfor %}

<div class="time-select-group">
  <label for="{{ id }}" class="form-label">{{ title }}</label>
  <div class="container-fluid">
    <div id="{{ id }}" class="row">
      <div class="col-6 p-0 pe-1">
        {% render "@select-list" with { "title": title ~ " (hour)", "default_option_text" : '--', "options": hour_options } %}
      </div>
      <div class="col-6 p-0 ps-1">
        {% render "@select-list" with { "title": title ~ " (minute)", "default_option_text" : '--', "options": minute_options } %}
      </div>
    </div>
  </div>
</div>
 
{
  "id": "time-select-group",
  "title": "Time",
  "step": 15,
  "enabled": true
}

No notes defined.