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