CalendarMobile/index.html at master · fleandro22/CalendarMobile · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Calendar Mobile</title>
	<script type="text/javascript" src="calendarMobile.js"></script>
	<link rel="stylesheet" href="calendarMobile.css">
	<style type="text/css">
		#div_left{
			float		: left;
			width		: 49%;
			position	: relative !important;
		}
	</style>
	<script type="text/javascript">
		/* 	METODOS DEL OBJETO JSON PARA LA ASIGNACION EN LA CLASSCALENDARMOBILE
			id_input      : Obligatorio 	Id del input q contiene el valor del calendario
			title         : Opcional 		Titulo de la ventana del calendario
			modal         : Opcional 		Boleano si el calendario es modal o no, por default es false
			id_position   : Opcional		Metodo modal true --> id del padre donde se renderizara la modal calendario, por default se renderiza en el body
											Metodo modal false o default --> id del elemento padre donde se renderizara la modal calendario

			separatorDate : Opcional 		Signo separador de day month year, por default es '-'
			limitDate     : Opcional 		limite inferior year, por default es '2000'
			arrayDays     : Opcional 		array con dias, inicia en Domingo -> valor por Default "Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado"
			arrayMonths   : Opcional 		array con meses, inicia en Enero -> valor por Default "Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"

			.closeCalendarMobile() 			Metodo global independiente de la instancia para cerrar el CalendarMobile ideal para ser ejecutado cuando el usuario
											toca el boton atras del dispositivo movil y no se sabe q instancia del calendario esta desplegado o no se quiere consultar :P.
		*/
		var newInputFecha1;
		var newInputFecha2;
		var newInputFecha3;
		var newInputFecha4;


		window.onload = function() {
			/* <!-- Se crean nuevas Instancia la clase ClassCalendarMobile --> */
			// Ejemplo de uso 1 modificando todos los atributos ->
			newInputFecha1 = new ClassCalendarMobile
			({
				id_input      : 'fecha1',
				title         : 'Fecha Inicial',
				modal         : true,
				separatorDate : '/',
				limitDate     : '2011',
				arrayDays     : 'Dom,Lun,Mar,Mié,Jue,Vie,Sáb',
				arrayMonths   : 'Ene,Feb,Mar,Abr,May,Jun,Jul,Ago,Sep,Oct,Nov,Dic'
			});

			// Ejemplo de uso 2 unico atributo obligatorio ->
			newInputFecha2 = new ClassCalendarMobile
			({
				id_input : 'fecha2'
			});

			// Ejemplo de uso 3 jugando con la posicion del calendario ->
			newInputFecha3 = new ClassCalendarMobile
			({
				id_input	: 'fecha3',
				id_position	: 'div_left'
			});

			// Ejemplo de uso 4 jugando con la posicion del calendario con el atributo modal ->
			newInputFecha4 = new ClassCalendarMobile
			({
				id_input	: 'fecha4',
				modal		: true,
				id_position	: 'div_left'
			});

		};

		function cerrar(){
			//Cierra cualquier calendario que este desplegado asi la instancia no se ha la misma que lo mostro.
			newInputFecha2.closeCalendarMobile();
		}


	</script>
</head>
<body>
	<div style="overflow:visible; width	:100%;">
		<div id="div_left"><h2>Calendar Mobile</h2></div>
		<div style="float:left; width:50%; height:100%">
			<input type="text" id="fecha1" /><br>
			<input type="text" id="fecha2" /><br>
			<input type="text" id="fecha3" /><br>
			<input type="text" id="fecha4" /><br>
			<input type="text" value="prueba close CalendarMobile" onclick="cerrar();" readonly="readonly"/><br>
		</div>
	</div>
</body>
</html>