Bootstrap es uno de los marcos CSS preferidos para el desarrollo de una interfaz de usuario interactiva. Bootstrap viene con una amplia gama de componentes, complementos y utilidades que facilitan mucho el diseño de una página web.
El selector de fechas es una de esas características interactivas proporcionadas por Bootstrap para seleccionar una fecha de un calendario desplegable que se refleja directamente en el campo de entrada, lo que elimina la molestia de ingresar la fecha manualmente. El selector de fechas se puede personalizar según los requisitos del usuario. Ya sea que el calendario se abra en forma de menú desplegable al hacer clic solo en el icono o se centre completamente en el campo de entrada, depende de la necesidad del usuario. Sin embargo, ambas opciones están abiertas para elegir. El calendario desplegable está disponible como una pequeña superposición y desaparece automáticamente una vez que el usuario hace clic en cualquier lugar fuera del calendario en la página web. Este funcionamiento del calendario es posible gracias a las funciones jQuery y JavaScript. A continuación se muestran los ejemplos de Selector de fecha que muestra el calendario cuando se hace clic en el icono.
Enfoque 1:
- El ícono del calendario se agrega al campo de entrada donde se ingresa la fecha usando la clase input-group-prepend.
- El lapso del icono se establece mediante la clase input-group-text.
- Cuando se hace clic en el icono, se activa la función setDatepicker() y la función setDatepicker() acepta el evento actual como argumento.
- A continuación, el nombre de clase de la raíz (principal) del icono se obtiene utilizando el método parent() y attr() de JavaScript. Como el nombre de la clase se obtiene a continuación, el espacio en el nombre de la clase se reemplaza por ‘.’.
- Este paso es importante ya que se requiere el nombre de la clase en el selector de clase en la función jQuery datepicker(). La función datepicker() especifica el formato de la fecha, la orientación del calendario, el comportamiento de cierre y enfoque automático. Una vez que se muestra el calendario, el usuario puede elegir la fecha y se refleja en el campo de entrada.
html
<!DOCTYPE html>
<html>
<head>
<!-- Importing jquery cdn -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous">
</script>
<!-- Importing icon cdn -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Importing core bootstrap cdn -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">
</script>
<!-- Importing datepicker cdn -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js">
</script>
</head>
<body>
<!-- Container class contains the date field -->
<div class="container" style="max-width: 250px;">
<div class="form-group m-1">
<label class="font-weight-bold" for="dob">
Date of Birth:
</label>
<!-- Input field along with
calendar icon and -->
<div class="input-group date">
<!-- Sets the calendar icon -->
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-calendar"
onclick="setDatepicker(this)">
</i>
</span>
</span>
<!-- Accepts the input from calendar -->
<input class="form-control" type="text"
name="dob" id="dob" value="">
</div>
</div>
</div>
<!-- JavaScript to control the actions
of the date picker -->
<script type="text/javascript">
function setDatepicker(_this) {
/* Get the parent class name so we
can show date picker */
let className = $(_this).parent()
.parent().parent().attr('class');
// Remove space and add '.'
let removeSpace = className.replace(' ', '.');
// jQuery class selector
$("." + removeSpace).datepicker({
format: "dd/mm/yyyy",
// Positioning where the calendar is placed
orientation: "bottom auto",
// Calendar closes when cursor is
// clicked outside the calendar
autoclose: true,
showOnFocus: "false"
});
}
</script>
</body>
</html>
Producción
Enfoque 2: El segundo enfoque es comparativamente más fácil. Logra el objetivo en menos líneas de código. Este código utiliza principalmente jQuery.
- El botón Imagen del selector de fecha también tiene el mismo propósito que el icono del ejemplo anterior. buttonImageOnly no solo agrega una imagen al botón, sino que también agrega una imagen al documento.
- Al hacer clic en la imagen se muestra el calendario y el usuario puede seleccionar la fecha que se refleja inmediatamente en el campo de entrada. La imagen del botón en este se descarga previamente y se almacena en el dispositivo local. El calendario se cierra cuando se hace clic fuera del calendario.
html
<html>
<head>
<!-- Importing jquery cdn -->
<link href=
"http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"
rel="Stylesheet"
type="text/css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<!-- JavaScript function to display the calendar -->
<script language="javascript">
$(document).ready(function () {
$("#txtdate").datepicker({
showOn: "button",
// Button image stored on local device
buttonImage: "./icons8-calendar-48.png",
buttonImageOnly: true
});
});
</script>
<!-- Customizing the datepicker button image -->
<style type="text/css">
.ui-datepicker-trigger {
max-height: 28px;
}
</style>
</head>
<body>
<form class="form-group">
Date :
<input id="txtdate" type="text"
class="form-control">
</form>
</body>
</html>
Producción
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA