ABSIS Cloud Galería de componentes estáticos

ABSIS Cloud ha realizado una adaptación del componente Bootstrap Timepiker para simplificar la interacción del usuario a la hora de introducir fechas.

Para el correcto funcionamiento será necesario incluir el css /static/fwk/components/bootstrap-timepicker/0.2.3/css/bootstrap-timepicker.min.css y el JavaScript /static/fwk/components/bootstrap-timepicker/0.2.3/js/bootstrap-timepicker.min.js

Parte de la customización realizada del componente es que automáticamente se declaran como campos de fecha los input text con class="timepiker". Es decir, ABSIS Cloud detectará como campos de entrada aquellos input cuya clase css sea timepiker.

La configuración por defecto, se seta con la hora actual, realiza incrementos en los minutos de 5 en 5, en las horas se incrementa de 1 en 1, muestra horas y minutos en formato de 24 horas. Estos parámetros pueden ser modificados cuando la aplicación así lo requiere añadiendole al input los siguientes atributos:

• data-minute-step: [numérico] Representa el incremento de minutos en cada click.
• data-second-step: [numérico] Representa el incremento de segundos en cada click.
• data-show-seconds: [true/false] Permite activar la presentación de segundos.
• data-show-meridian: [true/false] Permite activar el modo 24/12 horas.
• data-default-time: ['current'/'11:45 AM'/false] Valor del input

Veamos algunos ejemplos de como se deberían configurar las fechas:

<div class="control-group">
  <label for="textarea" class="control-label">Hora:</label>
  <div class="controls">
    <div class="input-append bootstrap-timepicker">
        <input type="text" class="timepiker input-hhmm"/>
        <span class="add-on timepiker-button-container"><i class="icon-time"></i></span>
     </div>
  </div>
</div>

<div class="control-group">
  <label for="textarea" class="control-label">Hora (Segundos):</label>
  <div class="controls">
    <div class="input-append bootstrap-timepicker">
        <input type="text" class="timepiker input-hhmmxx" data-show-seconds="true"/>
        <span class="add-on timepiker-button-container"><i class="icon-time"></i></span>
     </div>
  </div>
</div>

<div class="control-group">
  <label for="textarea" class="control-label">Hora (AM/PM):</label>
  <div class="controls">
    <div class="input-append bootstrap-timepicker" data-show-meridian="true">
        <input type="text" class="timepiker input-hhmmxxx"/>
        <span class="add-on timepiker-button-container"><i class="icon-time"></i></span>
     </div>
  </div>
</div>

<div class="control-group required">
  <label for="textarea" class="control-label">Hora requerida*:</label>
  <div class="controls">
    <div class="input-append bootstrap-timepicker">
        <input type="text" class="timepiker input-hhmm"/>
        <span class="add-on timepiker-button-container"><i class="icon-time"></i></span>
     </div>
  </div>
</div>

<div class="control-group  disabled">
  <label for="textarea" class="control-label">Hora con error:</label>
  <div class="controls">
    <div class="input-append bootstrap-timepicker">
        <input type="text" disabled="disabled" class="timepiker input-hhmm"/>
        <span class="add-on timepiker-button-container"><i class="icon-time"></i></span>
     </div>
  </div>
</div>

<div class="control-group  error">
  <label for="textarea" class="control-label">Hora con error:</label>
  <div class="controls">
    <div class="input-append bootstrap-timepicker">
        <input type="text" class="timepiker input-hhmm"/>
        <span class="add-on timepiker-button-container"><i class="icon-time"></i></span>
     </div>
  </div>
</div>