Plugin javascript para el control de rangos de contacto L-V de 8:00 a 17:00 y S-D de 10:00 a 14:00

martes, 20 de diciembre de 2016

Plugin javascript para el control de rangos de contacto L-V de 8:00 a 17:00 y S-D de 10:00 a 14:00


Me he visto en la necesidad de crear un "picker" que permita la selección de rangos horarios de contacto, esto con la finalidad de poder especificar que una persona puede ser contactada por ejemplo de Lunes a Viernes de 8:00 a 17:00 y de Sábado a Domingo de 10:00 a 14:00.

Este plugin ha sido desarrollado pensando que sea utilizado junto con la librería de jQuery y al menos la hoja de estilo de Bootstrap (siempre que se quiera un diseño ajustado a Bootstrap).


A continuación los parametros que se pueden establecer en el plugin:

 return $.fn.rangeSheduleContact.defaults = {  
       days: [  
         { label: 'L', tooltip: 'Lunes', value: 'L' },  
         { label: 'M', tooltip: 'Martes', value: 'M' },  
         { label: 'X', tooltip: 'Miércoles', value: 'X' },  
         { label: 'J', tooltip: 'Jueves', value: 'J' },  
         { label: 'V', tooltip: 'Viernes', value: 'V' },  
         { label: 'S', tooltip: 'Sábado', value: 'S' },  
         { label: 'D', tooltip: 'Domingo', value: 'D' }  
       ],  
       minutes: [  
         { label: '00', value: 0 },  
         { label: '15', value: 15 },  
         { label: '30', value: 30 },  
         { label: '45', value: 45 }  
       ],  
       texts: {  
         captionEmptyRange: '<div class="alert alert-info">Especifíque un rango de contacto</div>',  
         iconButtonTextPopup: '<i class="glyphicon glyphicon-chevron-down"></i>',  
         iconButtonDeleteRange: '<i class="glyphicon glyphicon glyphicon-remove"></i>',  
         add: 'Agregar',  
         close: 'Cerrar',  
         titleBarFrom: 'Desde',  
         titleBarTo: 'Hasta',  
         errorMsgSelectDayForm: 'Debe seleccionar el día desde del rango',  
         errorMsgSelectDayTo: 'Debe seleccionar el día hasta del rango',  
         errorMsgSelectHourFrom: 'Debe seleccionar la hora desde del rango',  
         errorMsgSelectHourTo: 'Debe seleccionar la hora hasta del rango',  
         errorMsgSelectMinuteFrom: 'Debe seleccionar el minuto desde del rango',  
         errorMsgSelectMinuteTo: 'Debe seleccionar el minuto hasta del rango',  
         errorMsgDayToLessThanDayFrom: 'El día hasta debe ser un día igual o posterior al día desde',  
         errorMsgRangeInOtherRange: 'El rango especificado se encuentra dentro de otro rango existente'  
       },  
       numbersLineShow: 1,  
       hourMin: 0,  
       hourMax: 24,  
       defaultHourFrom: 8, //Pendiente  
       defaultHourTo: 17, //Pendiente  
       defaultDayFrom: 'L', //Pendiente  
       defaultDayTo: 'V', //Pendiente  
       editable: true,  
       enabled: true,  
       preventRangeNegative: true,  
       preventRangeInOtherRanges: true,  
       callbacks: {  
         callbackErrorMsg: function (element, msg) { alert(msg); },  
         callbackRangeAdd: function (element, range) { },  
         callbackRangeAdded: function (element, range) { },  
         callbackOpenPopup: function (element) { },  
         callbackClosePopup: function (element) { },  
       }  
     };  


Podéis ver el plugin funcionando y el código fuente en JSFiddle.

0 comentarios :

Publicar un comentario