ejemplo de calendario con Datepicker  y JQUERY en español

ejemplo de calendario con Datepicker y JQUERY en español

ejemplo de calendario con Datepicker  y JQUERY en español

para mostrar un calendario en tu página web te recomiendo que utilices el objeto DatePicker de jQuery el cual te facilita mucho el diseño de un calendario

en el siguiente ejemplo te muestro cómo puedes insertar un calendario en tu página web

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mostrar calendario con jQuery UI Datepicker</title>
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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() {
 $( "#calendario" ).datepicker();
 } );
 </script>
</head>
<body>
Selecciona una fecha: <div id="calendario"></div>
</body>
</html>

como puedes ver en el código anterior, aparte de una referencia a la librería estándar de jQuery tienes que hacer una referencia a la hoja de estilos JQuery UI y una referencia a la librería de jQuery-UI

UI significa User Interface

una vez escritas estas referencias tienes que poner en el apartado body el elemento que contendrá el calendario y en este caso hemos utilizado un div al cual he llamado calendario y entonces en la parte de programación has de crear una función anónima en la que ejecutas el método datepicker a este objeto

y así de fácil es insertar un calendario en tu página web usando jQuery

si quieres que el calendario no se muestre directamente sino que primero muestre un campo de texto y al hacer clic sobre él se abra el calendario lo único que tienes que hacer es en lugar de crear en el body un div tienes que ponerlo en un input

<input type="text" id="calendario">

si quieres más información sobre datepicker de jQuery te dejo el siguiente enlace