En este artículo, aprenderemos sobre Datepicker en jQuery . jQuery es la biblioteca de JavaScript más rápida y liviana que se utiliza para simplificar las interacciones entre un documento HTML/CSS , o más precisamente el Modelo de Objetos de Documento (DOM) y JavaScript .
jQuery es ampliamente famoso por su lema « Escribe menos, haz más». Simplemente significa que puede lograr su objetivo con solo escribir unas pocas líneas de código.
En muchas formas, puede seleccionar la fecha y el año del calendario. Datepicker es una forma estándar del campo de entrada que se utiliza para seleccionar la fecha y el año con solo ver el calendario. Es un calendario interactivo en una superposición específica.
Cuando hace clic en cualquier fecha que se menciona en el calendario, aparecerán los comentarios en el texto de entrada.
Acercarse:
- Cree un archivo HTML e importe la biblioteca jQuery .
- El método jQuery datepicker() se utiliza para crear una superposición de un calendario interactivo.
- Aplique CSS a su aplicación según la necesidad.
Sintaxis 1:
<script type="text/javascript">
$(function() {
$("#txtDate").datepicker({
dateFormat: 'dd/mm/yy'
});
});
</script>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
jQuery UI datepicker format dd/mm/yyyy
</title>
<link type="text/css" href=
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
rel="stylesheet" />
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style type="text/css">
.ui-datepicker {
font-size: 8pt !important
}
body {
text-align: center;
background-color: lightgray;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <input type=""
name="" id="txtDate" runat="server" />
</div>
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
dateFormat: 'dd/mm/yy'
});
});
</script>
</form>
</body>
</html>
Producción:
Sintaxis 2:
<script type="text/javascript">
$(function() {
$("#txtDate").datepicker({
dateFormat: 'yy/mm/dd'
});
});
</script>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
jQuery ui datepicker format dd/mm/yyyy
</title>
<link type="text/css" href=
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
rel="stylesheet" />
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript"
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style type="text/css">
.ui-datepicker {
font-size: 8pt !important
}
body {
text-align: center;
background-color: lightgray;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <input type=""
name="" id="txtDate" runat="server" />
</div>
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
dateFormat: 'yy/mm/dd'
});
});
</script>
</form>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA