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.
En este artículo, aprenderemos a diseñar un selector de tiempo usando jQuery EasyUI. El widget TimePicker se usa para mostrar un selector que se puede usar para seleccionar una hora en el formato requerido.
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Sintaxis:
<input class="easyui-timepicker">
Propiedades:
- closeText : Es el texto a mostrar para el botón de cerrar.
- okText : Es el texto a mostrar para el botón ok.
- value : Es el tiempo por defecto del selector.
- ampm : estas son las etiquetas para los botones AM y PM.
- hora24 : Define si mostrar la hora en formato de 24 horas.
Métodos:
- opciones: Devuelve el objeto de opciones.
- getValue: Obtiene el valor del componente.
- setValue: Establece el valor del componente.
- reset: Resetea el valor del componente.
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').timepicker({
hour24: false
})
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery timepicker widget</h3>
<!-- Define the EasyUI TimePicker
with markup -->
<input id="gfg" class="easyui-timepicker">
</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 timepicker widget</h3>
<!-- Define the element that
will be used as the TimePicker -->
<input id='gfg'>
<script type="text/javascript">
// Initialize the EasyUI TimePicker
$('#gfg').timepicker({
hour24: false
});
</script>
</body>
</html>
Producción:
Referencia: https://www.jeasyui.com/documentation/timepicker.php