En este artículo, aprenderemos a usar un complemento selector de fecha y hora multimodo para Bootstrap (3 y 4), jQueryMobile y Bulma. El complemento jQuery datebox se basa completamente en tecnologías JavaScript, HTML y CSS.
Algunas características clave del complemento son las siguientes
- Puede limitar cualquier condición como fecha, hora y duración.
- Muchas devoluciones de llamada y disparadores están disponibles en eventos de creación, apertura, cierre, cambio y destrucción.
- La herramienta proporciona funciones como columnas deslizables o semanas.
Descargue los archivos precompilados necesarios del enlace y guárdelos en su carpeta de trabajo para su implementación.
Sección de código de encabezado HTML: el siguiente fragmento de código HTML contiene la sección de encabezado que tiene todos los archivos precompilados comunes necesarios para que se ejecuten todos los siguientes ejemplos.
Nota: incluya todos los siguientes enlaces de biblioteca en sus códigos con las rutas de archivo adecuadas.
html
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13Fy QuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script type="text/javascript" src="../src/js/external/widgetLib.js"> </script> <script type="text/javascript" src="../src/js/baseObject.js"></script> <!-- Enhance JavaScript date object--> <script type="text/javascript" src="../src/js/lib/dateEnhance.js"></script> <!--Date / Time output --> <script type="text/javascript" src="../src/js/lib/dateFormatter.js"></script> <!--Limit functions --> <script type="text/javascript" src="../src/js/lib/dateLimit.js"></script> <!-- Date / Time input --> <script type="text/javascript" src="../src/js/lib/dateParser.js"></script> <!--Event loop --> <script type="text/javascript" src="../src/js/lib/eventHandler.js"></script> <!-- Date adjustments --> <script type="text/javascript" src="../src/js/lib/offset.js"></script> <!-- Public functions --> <script type="text/javascript" src="../src/js/lib/public.js"></script> <!-- Short utility functions --> <script type="text/javascript" src="../src/js/lib/shortUtil.js"></script> <script type="text/javascript" src="../src/js/lib/standardControls.js"></script> <!-- Create the widget --> <script type="text/javascript" src="../src/js/lib/widgetCreate.js"></script> <script type="text/javascript" src="../src/js/lib/widgetOpen.js"></script> <!-- Closing of the widget --> <script type="text/javascript" src="../src/js/lib/widgetClose.js"></script> <!-- Destroy, Enable & Disable the widget --> <script type="text/javascript" src="../src/js/lib/widgetDestroyEnableDisable.js"> </script> <!-- Handle positioning of the widget --> <script type="text/javascript" src="../src/js/lib/positioning.js"></script> <!-- Twitter Bootstrap v3.4.1 --> <script type="text/javascript" src="../src/js/framework/bootstrap.js"></script> <!-- DateBox, TimeBox, DateTimeBox, DurationBox --> <script type="text/javascript" src="../src/js/modes/datebox.js"></script> <!-- FlipBox, TimeFlipBox, DateTimeFlipBox, DurationFlipBox --> <script type="text/javascript" src="../src/js/modes/flipbox.js"></script> <!-- CalBox --> <script type="text/javascript" src="../src/js/modes/calbox.js"></script> <!-- SlideBox --> <script type="text/javascript" src="../src/js/modes/slidebox.js"></script> <!-- Used only in the test environment --> <script type="text/javascript" src="../src/js/widgetBinding.js"></script> <!-- Auto enhance for data-role on a page --> <script type="text/javascript" src="../src/js/autoInit.js"></script> <script type="text/javascript" src="https://cdn.jtsage.com/jtsage-datebox/ i18n/jtsage-datebox.lang.utf8.js"> </script> </head>
Ejemplo 1: El siguiente selector de fecha y hora demuestra para Bootstrap 4. No olvide incluir los archivos precompilados de Bootstrap (3 y 4) en sus códigos de Bootstrap como se muestra a continuación.
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/
4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/
popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
jQuery.extend(jQuery.jtsage.datebox.prototype.options, {
mode : "calbox",
/* Display */
displayMode : "inline",
lockInput: false,
displayDropdownPosition : "bottomRight",
useImmediate : true,
useFocus : true,
useButton : true,
/* Callbacks */
beforeOpenCallbackArgs : [ "helloback call", "bye"],
beforeOpenCallback : function(a, b)
{
console.log(a);
console.log(b);
return true;
},
closeCallbackArgs : [ "hi close", "bye close"],
closeCallback : function(a, b)
{
console.log(a);
console.log(b);
},
calDateList : [
["1980-04-25", "JT's Date of Birth"],
["1809-02-12", "Lincoln's Birthday"] ],
calShowDateList : true,
slideDateList : [ ["1980-04-25", "JT's Date of Birth"],
["1809-02-12", "Lincoln's Birthday"] ],
slideShowDateList : true,
minHour : 9,
maxHour : 5,
minTime : "9:00",
maxTime : "17:00",
slideUsePickers : true,
slideYearPickMax : 2020,
slideYearPickMin : 1950,
minuteStep : 15,
/* Control Buttons */
closeTodayButton : true,
useCancelButton : true,
useClearButton : true,
useTodayButton : true,
useCollapsedBut : true,
});
</script>
</head>
<body>
<div class="container" role="main">
<form>
<div class="form-group">
<label class="control-label"for="db">
DateBox</label>
<input class="form-control" name="db"
type="text" data-role="datebox" id="db" />
</div>
</form>
</div>
</body>
</html>
Producción:
El siguiente es el resultado que se muestra en la consola para demostrar el funcionamiento de las funciones de devolución de llamada.
Ejemplo 2: El siguiente código demuestra para Bulma . No olvides incluir archivos precompilados de Bulma en tus códigos de Bulma como se muestra a continuación .
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/
gh/jgthms/bulma@0.8.0/css/bulma.css" />
<script type="text/javascript"
src="../src/js/framework/bulma.js"></script>
<script type="text/javascript">
jQuery.extend(jQuery.jtsage.datebox.prototype.options,
{
/* Modes can be changed as per user*/
mode : "slidebox",
/* Display */
displayMode : "dropdown",
/* Linked fields */
linkedField : false,
slideShowDateList : true,
calDateList : [ ["1980-04-25", "JT's Date of Birth"],
["1809-02-12", "Lincoln's Birthday"] ],
calShowDateList : true,
slideDateList : [ ["1980-04-25", "JT's Date of Birth"],
["1809-02-12", "Lincoln's Birthday"] ],
slideShowDateList : true,
calUsePickers : true,
slideUsePickers : true,
calUsePickers : true,
slideUsePickers : true,
useCancelButton : true,
useTodayButton : true,
useCollapsedBut : true,
useCancelButton : true,
useClearButton : true,
useTodayButton : true,
useCollapsedBut : true,
});
</script>
<style>
body{
width:550px;
padding:10px,10px;
}
h3{
margin:0 auto;
padding:20px,20px;
}
</style>
</head>
<body>
<h3>Datebox in Bulma </h3>
<div class="container" role="main">
<form class="form">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label" for="db">DateBox</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="db" type="text"
data-role="datebox" id="db" />
</div>
</div>
</div>
</div>
</form>
</div>
</html>
Salida: La siguiente es la salida cuando el modo seleccionado por el desarrollador es «datebox»
El siguiente es el resultado cuando el modo seleccionado por el desarrollador es «slidebox».
Nota: el desarrollador puede probar diferentes modos e implementar varias funciones de devolución de llamada y otras opciones de JavaScript según los requisitos de la aplicación. Solo se muestran unas pocas opciones para la demostración.
Ejemplo 3: El siguiente código muestra el selector de fecha y hora para los códigos móviles de jQuery. No olvide incluir archivos precompilados de jQuery mobile en sus códigos para diseños móviles como se muestra a continuación. Las funciones de devolución de llamada se pueden implementar de la misma manera que se muestra en el primer ejemplo, según sea necesario.
html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery mobile libraries -->
<link rel="stylesheet"
href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
</script>
<script type="text/javascript" src="../src/js/framework/jqm.js"></script>
<!-- jQuery mobile libraries -->
<script type="text/javascript">
jQuery.extend(jQuery.jtsage.datebox.prototype.options, {
/* Mode */
mode : "datebox",
/* Display */
displayMode : "dropdown",
displayDropdownPosition : "bottomMiddle",
linkedField : false,
calDateList : [ ["1980-04-25", "JT's Date of Birth"],
["1809-02-12", "Lincoln's Birthday"] ],
calShowDateList : true,
slideDateList : [ ["1980-04-25", "JT's Date of Birth"],
["1809-02-12", "Lincoln's Birthday"] ],
slideShowDateList : true,
calUsePickers : true,
slideUsePickers : true,
useCancelButton : true,
useClearButton : true,
useTodayButton : true,
});
</script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header" data-position="fixed">
<h3>DateBox </h3>
</div>
<div class="ui-content" role="main">
<div class="ui-field-contain">
<label for="db">Year Pick</label>
<input name="db" type="text" data-mini="true"
data-role="datebox" id="db" />
</div>
<div id="db-dbAttach"></div>
<div class="ui-field-contain">
<label for="db2">Year Pick</label>
<input name="db2" type="text" data-mini="true"
data-options='{"mode":"datebox", "overrideDateFieldOrder": ["y"],
"overrideHeaderFormat":"%Y", "overrideDateFormat": "%Y" }'
data-role="datebox" id="db2" />
</div>
<div class="ui-field-contain">
<label for="db3">Year Picker - Flipbox</label>
<input name="db3" type="text" data-mini="true"
data-options='{"mode":"flipbox", "overrideDateFieldOrder": ["y"],
"overrideHeaderFormat":"%Y", "overrideDateFormat": "%Y" }'
data-role="datebox" id="db2" />
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>jQuery Mobile datebox Information</h1>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA