Hola a todos, necesito sugerencias, ideas, aportes a mi problema:
Realizo consultas en php a mysql para poder realizar una reserva donde se requiere llenar campos de fechas de ingreso y de salida. El problema es que tengo que mostrar calendarios de acuerdo al numero de registros, el diseño del calendario solo puedo visualizarlo en mi primer registro mas no en los siguientes, como podria generar varios calendarios de acuerdo a un bucle:
El diseño de mi calendario:
<input name="checkIn1" type="text" id="checkIn1" size="10"/><a href="#" id="checkInCal1_toggle"><img src="../images/Calendar.gif" border="0" alt="" /></a><div id="checkInCal1"></div>
<input name="checkOut1" type="text" id="checkOut1" size="10"/><a href="#" id="checkOutCal1_toggle"><img src="../images/Calendar.gif" border="0" alt="" /></a><div id="checkInCal2"></div>
El script en javascript (para el calendario1)
<script type="text/javascript" language="javascript">
var checkOutCal1 = new Calendar("checkOutCal1", "checkOutCal1_toggle", { inputField: 'checkOut1', dateFormat: 'm-d-Y', allowWeekendSelection: true, idPrefix: 'co_cal', onSelect: function() { checkOutCal1.closeCalendar(); } });
var checkInCal1 = new Calendar("checkInCal1", "checkInCal1_toggle", { inputField: 'checkIn1', dateFormat: 'm-d-Y', allowWeekendSelection: true, startDate: new Date(), idPrefix: 'ci_cal', onSelect: function() { checkInCal1.closeCalendar(); checkOutCal1.selectDate(new Date(document.getElementById('checkIn1').value).ge tTime() + 2 * 86400 * 1000); } });
document.getElementById('checkInCal1').setStyles({
'position': 'absolute',
'z-index': 25000,
'opacity': 0,
'background-color':'#F7F7F7',
'border':'1px solid #00549F',
'padding':'5px 2px',
'padding-bottom':'1px',
'width':'212px'
});
document.getElementById('checkOutCal1').setStyles( {
'position': 'absolute',
'z-index': 25000,
'opacity': 0,
'background-color': '#F7F7F7',
'border': '1px solid #00549F',
'padding': '5px 2px',
'width': '212px'
});
</script>
El script en javascript (para el calendario2)
<script type="text/javascript" language="javascript">
var checkOutCal2 = new Calendar("checkOutCal2", "checkOutCal2_toggle", { inputField: 'checkOut2', dateFormat: 'm/d/Y', allowWeekendSelection: true, idPrefix: 'co_cal2', onSelect: function() { checkOutCal2.closeCalendar(); } });
var checkInCal2 = new Calendar("checkInCal2", "checkInCal2_toggle", { inputField: 'checkIn2', dateFormat: 'm/d/Y', allowWeekendSelection: true, startDate: new Date(), idPrefix: 'ci_cal2', onSelect: function() { checkInCal2.closeCalendar(); checkOutCal2.selectDate(new Date(document.getElementById('checkIn2').value).ge tTime() + 2 * 86400 * 1000); } });
document.getElementById('checkInCal2').setStyles({
'position': 'absolute',
'z-index': 25000,
'opacity': 0,
'background-color':'#F7F7F7',
'border':'1px solid #00549F',
'padding':'5px 2px',
'width':'212px'
});
document.getElementById('checkOutCal2').setStyles( {
'position': 'absolute',
'z-index': 25000,
'opacity': 0,
'background-color': '#F7F7F7',
'border': '1px solid #00549F',
'padding': '5px 2px',
'width': '212px'
});
</script>
Algo importante es que en cada fila debe contener dos calendarios, por ejemplo, si en mi bucle obtengo 6 filas (o registros) el total de calendarios serian 12.
Please cualquier ayuda seria muy valioso.
Graciass