jQuery Datepicker:
¿Qué es el jQuery User Interface Datepicker?
Dentro del jQuery User Interface encontramos toda una serie de elementos de programación de la interfaz de usuario preprogramados y listos para ser integrados en nuestros proyectos HTML. Se trata de una amplia biblioteca JavaScript que abarca desde efectos dinámicos, hasta menús, calendarios, etc.
En concreto, el componente Datepicker nos proporciona un calendario totalmente personalizable, en el que podremos realizar selecciones de fechas y asociarlo a elementos HTML, como entradas de formularios.<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> </head> <body> <p>Date: <input type="text" id="datepicker"></p> <div id="placeholder"></div> </body> </html> Change: $("#datepicker").change(function() { var date = $(this).datepicker("getDate"); $("#placeholder").text(date); }); $("#datepicker").on("change",function(){ var selected = $(this).val(); alert(selected); }); onSelect: $("#datepicker").datepicker({ dateFormat: "yy-mm-dd", onSelect: function(){ var selected = $(this).val(); alert(selected); } });
0 comentarios:
Publicar un comentario