Registra entrada de empleados ó asigna lugares con Business Hours

DESCARGA : Business Hours

Registra entrada de empleados o asigna lugares con Business Hours, si estas realizando un sistema que maneje entradas o salidas de algún trabajador o estas realizando un sistema para ocupar lugares como por ejemplo: algún restaurante, hotel, sala, etc. Bussines Hours puedes ser una alternativa para solucionar el detalle del registro.
Este plugin tiene la finalidad de ocupar/registrar entradas de usuarios o empleados al sistema, pero no es solo para ese fin ya que la implementación puede ser para ocupar lugares adentro de un cuarto, sala, hotel, evento, etc.

El plugin implementa otro plugin que maneja las horas de manera dinámica (el plugin es timepicker : http://jonthornton.github.io/jquery-timepicker/ ).
La implementación de este plugin es fácil ya que solo maneja unos cuantos parámetros y una etiqueta que es convertido a cuadrados de selección, dichos formatos y fechas pueden ser agregados a la hora de la creación de los objetos.

Vamos a ver un ejemplo de la implementación de este plugin.

Primero necesitamos los enlaces de timepicker y businessHours además el archivo del framework jQuery y no nos olvidemos de los archivos css:

 <script type="text/javascript" src="js/jquery.min.js"></script>

	<script type="text/javascript" src="js/jquery.timepicker.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/jquery.timepicker.css"/>

	<script type="text/javascript" src="js/jquery.businessHours.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.businessHours.css"/>

Contenedor del DIV

 <div id="ContenedorPlugin"></div>

y por último el código javascript que es parametrizado

(function() {
Elemento=$("#ContenedorPlugin");
var ManejadorElemento = Elemento.businessHours({
postInit:function(){
Elemento.find('.operationTimeFrom, .operationTimeTill').timepicker({
'timeFormat': 'H:i',
'step': 15
});
},
'operationTime':[
{},{},{isActive: false},{},{},{},{},{}
],
weekdays: ['Lunes',
'Martes',
'Miércoles',
'Jueves',
'Viernes',
'Sábado',
'Domingo',
'otro Item']
});
// botón
$("#btn").click(function() {
alert(JSON.stringify(ManejadorElemento.serialize()));
});

})();


Demostración: http://gendelf.github.io/jquery.businessHours/

 

You may also like...