jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante jQuery, CSS y HTML. jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. El widget jQuery UI Datepickers permite a los usuarios ingresar fechas de manera fácil y visual. En este artículo, veremos cómo usar la opción closeText en jQuery UI Datepicker. La opción closeText se utiliza para cerrar el Selector de fechas haciendo clic únicamente en el texto en el Selector de fechas de jQuery UI.
Sintaxis:
$(".selector").datepicker(
{closeText: 'tap',
showButtonPanel: true}
);
Acercarse:
- Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace href = «https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css» rel = «hoja de estilo»>
<secuencia de comandos src = «https://code.jquery.com/jquery-1.10.2.js»></secuencia de comandos>
<secuencia de comandos src = «https://code.jquery.com/ui/1.10.4/jquery-ui.js»></secuencia de comandos>
Ejemplo :
HTML
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<link href =
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src =
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src =
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<!-- Javascript -->
<script>
$(function() {
$( "#gfg" ).datepicker(
{closeText: 'tap',
showButtonPanel: true}
);
});
</script>
</head>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI | datepicker closeText option</h3>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "gfg"></p>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/datepicker/