En este artículo, aprenderemos cómo usar Bootstrap Datepicker para obtener una fecha en los cambios de eventos. Bootstrap Datepicker es un repositorio de código abierto que proporciona una API para integrar el selector de fecha y hora en la interfaz del sitio web. Uno debe tener un conocimiento básico de HTML , CSS , jQuery y Bootstrap .
Acercarse:
- Cree un archivo HTML.
- Siga el formato de código a continuación para vincular algún CSS externo a su código dentro de la etiqueta principal siguiendo este orden.
- Comience por incluir el CSS de arranque en su archivo. Agregue el CSS del selector de fechas de arranque a su archivo. Finalmente, debe agregar la fuente Awesome CSS a su archivo HTML.
<enlace rel=”hoja de estilo” href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css” />
<enlace rel=”hoja de estilo” href =”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css” />
<link rel=”stylesheet” href=”https://stackpath. bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” />
- Siguiendo el siguiente formato de código, adjunte algunos archivos JavaScript externos a su código dentro de la etiqueta principal siguiendo este orden.
- Comience por incluir jquery JavaScript en su archivo. El segundo paso es agregar el JavaScript de arranque a su archivo. Finalmente, debe agregar el código JavaScript bootstrap datetimepicker a su archivo HTML.
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”> </script>
<script src= “https://cdnjs.cloudflare.com/ajax/libs /twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0 /js/bootstrap-datepicker.min.js”></script>
- Agregue un nombre de clase como » datepicker » y otras clases de arranque a un campo de entrada según sea necesario
- Puede usar cualquier icono de cualquier recurso como fuente impresionante o cualquier otra plataforma para embellecer su campo de entrada alineando el icono en línea con el campo de entrada.
- Luego, es necesario inicializar el selector de fecha en el campo de entrada para que cuando el usuario haga clic en ese campo de entrada, aparezca el calendario emergente y luego pueda elegir la fecha de ese mensaje.
Ejemplo: en este ejemplo, tomamos un campo de entrada con el nombre de clase como «datepicker» e inicializamos el datepicker en esta entrada usando datepicker() .
Aparece un calendario cuando el usuario hace clic en el campo de entrada y se puede seleccionar una fecha del calendario. Tan pronto como el usuario selecciona una fecha del calendario, se escribe automáticamente en el campo de entrada. Agregamos un detector de eventos onchange para ese campo de entrada. Cuando se realiza una selección en ese campo de entrada, se llama automáticamente al método de devolución de llamada onchange() para obtener el valor del campo de entrada mediante el método jQuery val() .
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" />
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js">
</script>
<style>
.container {
display: flex;
justify-content: center;
margin-top: 30px;
}
h1,
container {
color: green;
}
</style>
</head>
<body>
<h1 class="container">
GeeksforGeeks
</h1>
<div class="container">
<div class="datepicker date
input-group p-0 shadow-sm">
<input id="reservationDate"
type="text"
placeholder="Choose a date"
class="form-control py-4 px-4" />
<div class="input-group-append">
<span class="input-group-text px-4">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
</div>
<div class="container">
<p id="showdate"> No Date is Picked </p>
</div>
<script>
$(".datepicker").datepicker({
clearBtn: true,
format: "dd/mm/yyyy",
});
$(".datepicker").on("change", function() {
let pickedDate = $("input").val();
$("#showdate").text(
`You picked this ${pickedDate} Date`);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA