En este artículo, aprenderemos cómo diseñar un control de tiempo usando jQuery EasyUI. El widget TimeSpinner anletdecreciente
EasyUI es un marco HTML5 para usar componentes de interfaz de usuario basados en tecnologías jQuery, React, Angular y Vue. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores.
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Sintaxis:
<input class="easyui-timespinner">
Propiedad:
- separador: Es el separador entre una hora y un minuto y segundo
- showSeconds: Define si mostrar la segunda información.
- hora12: Define si mostrar en formato de 12 horas.
- ampm: es la etiqueta AM/PM que se muestra en el cuadro de entrada.
- resaltar: Es el campo que se tiene que resaltar inicialmente.
Métodos:
- opciones: Devuelve el objeto de opciones.
- setValue: Establece el valor del marcador de tiempo.
- getHours: Obtiene el valor de la hora actual.
- getMinutes: Obtiene el valor de los minutos actuales.
- getSeconds: Obtiene el segundo valor actual.
Enlace CDN: Primero, agregue los scripts jQuery Easy UI necesarios para su proyecto.
<script type=”text/javascript” src=”jquery.min.js”></script>
<!–bibliotecas jQuery de EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min. js”> </script>
<!–Biblioteca jQuery de EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>
Ejemplo 1:
HTML
<html>
<head>
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet"
type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet"
type="text/css"
href="themes/mobile.css">
<link rel="stylesheet"
type="text/css"
href="themes/icon.css">
<!-- jQuery library -->
<script type="text/javascript"
src="jquery.min.js">
</script>
<!-- jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!-- jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<script type="text/javascript">
$('#gfg').timespinner({
hour12: false
})
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery timespinner widget</h3>
<!-- Define the TimeSpinner using markup -->
<input id="gfg" class="easyui-timespinner">
</body>
</html>
Producción:
Ejemplo 2:
HTML
<html>
<head>
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet"
type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet"
type="text/css"
href="themes/mobile.css">
<link rel="stylesheet"
type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript"
src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery timespinner widget</h3>
<!-- Define the element to be used
as the TimeSpinner -->
<input id='gfg'>
<script type="text/javascript">
// Initialize the EasyUI TimeSpinner
$('#gfg').timespinner({
hour12: false
});
</script>
</body>
</html>
Producción:
Referencia: https://www.jeasyui.com/documentation/timespinner.php