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. La opción onClose del selector de fechas de jQuery UI se llama cuando el selector de fechas está cerrado, ya sea que la fecha esté seleccionada o no. La opción onClose alberga una función que contiene la fecha seleccionada como texto («» si no hay ninguno) y la instancia del selector de fecha como parámetros.
Sintaxis:
onClose: Function( String dateText, Object inst ) { }
Enlace CDN: Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”> <script src=”//code.jquery.com/jquery- 1.12.4.js”></script> <script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
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>
<script>
$(function () {
$("#gfg").datepicker({
onClose: function (date, datepicker) {
if (date != "") {
alert("Selected Date: " + date);
}
}
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI datepicker onClose Option</h3>
<div>Enter Date: <input type="text" id="gfg" /></div>
</body>
</html>
Producción:
Reference: https://api.jqueryui.com/datepicker/#option-onClose