Ejemplo de selector de tiempo de JavaScript en HTML

Muhammad Muzammil Hussain 12 octubre 2023

JavaScript JavaScript Time Picker

El selector de tiempo de JavaScript permite al usuario final seleccionar el tiempo ingresando directamente el valor o desde una ventana emergente. El tiempo puede estar presente en múltiples formatos, y depende del tipo de formato que necesite.

Ejemplo de selector de tiempo de JavaScript en HTML

Aquí puede ver un ejemplo del método clockTimePicker() de JavaScript, que ayuda a los usuarios a seleccionar un valor de tiempo en el menú emergente. El método toma la ayuda de las bibliotecas jQuery para mostrar las opciones de tiempo.

Aquí, en el primer paso, incluya los siguientes CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/md-date-time-picker@2.3.0/dist/css/mdDateTimePicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-clock-timepicker@2.5.0/jquery-clock-timepicker.min.js"></script>

En el siguiente código fuente HTML, hemos incluido los CDN y hemos creado un elemento de formulario con la etiqueta <input> dando id="timePicker", e inicializado el $('#timePicker').clockTimePicker() con el mismo ID de entrada en la etiqueta script.

<!doctype html>
<html lang="en">
  <head>
    <title>Time Picker</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/md-date-time-picker@2.3.0/dist/css/mdDateTimePicker.min.css">
  </head>
  <body>
  <form>
     <input type="text" id="timePicker">
  </form>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-clock-timepicker@2.5.0/jquery-clock-timepicker.min.js"></script>
<script>
  $('#timePicker').clockTimePicker();
</script>
</body>
</html>

En la fuente de la página HTML anterior, puede ver un tipo de tiempo de formulario de entrada simple para obtener el valor entero del usuario final. Podemos incluir más propiedades para una mayor personalización dando opciones en el objeto.

$('#timePicker').clockTimePicker({
  duration: true,
  durationNegative: true,
  precision: 5,
  i18n: {cancelButton: 'Abbrechen'},
  onAdjust: function(newVal, oldVal) {
    //...
  }
});

Aquí duration: true, establezca la configuración de horas mayor que 23. Mientras que durationNegative es por defecto false, y si su valor es true, la duración será negativa.

Aún así, solo afecta la configuración cuando la condición de duration es verdadera. La condición precision crea una secuencia en minutos como precision: 5 permite a los usuarios seleccionar pasos de minutos con valores de diferencia de 5 minutos (6:05, 6:10, 6:15, 6:20, …). La condición de precision sólo permite estos valores: 1, 5, 10, 15, 30, 60.

El cancelButton: 'Abbrechen' es solo para pantallas móviles. Con este botón, puede cancelar el cambio de hora.

Aquí function(newVal, oldVal) es el valor predeterminado de onAdjust. La función onAdjust funciona cuando el valor está cambiando.