Jquery ui DatePicker , calendarios...

jevymetal69 · #1 (**permalink**) 28/12/2010, 09:25

Hola muy buenas,
Mil gracias por adelantado ...
Estoy investigando sobre los calendarios JQUERY UI DATAPICKER ...
El caso es que en la página existen muchos ejemplos de cómo el calendario , sale de un campo <input type="text">...
Mi cuestión sería si habría alguna manera de que saliera de un campo <select>
O incluso de una imagen...
Por lo visto sólo puede ser vinculado a este tipo de campos...
Aquí se pueden ver varios ejemplos...
http://jqueryui.com/demos/datepicker/
Aún así aceptaría otras sugerencias para el uso de calendarios bonitos y prácticos : )
Saludos y gracias de nuevo¡

doylelives · #2 (**permalink**) 28/12/2010, 10:06

mmm interesante desafio, he encontrado un code que quizas puedas aplicarlo.
http://forum.jquery.com/topic/jquery...h-select-lists
espero te sirva.

jevymetal69 · #3 (**permalink**) 29/12/2010, 06:26

Mil gracias¡¡

He podido desarrrollar lo que pretendía...
Dos select que se autoactualizan con calendarios que están vinculados por las fechas de inicio y de fín de cada select...
Os pongo el código integro para que la gente pueda probarlo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Calendario</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href=".\estilos\blitzer\jquery-ui-1.8.7.custon.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src=".\librerias\Jquery\jquery.js"></script>
<script type="text/javascript" src=".\librerias\Jquery\jquery.ui.core.js"></script>
<script type="text/javascript" src=".\librerias\Jquery\jquery.ui.widget.js"></script>
<script type="text/javascript" src=".\librerias\Jquery\jquery.ui.datepicker.js"></script>
<script type="text/javascript" src=".\librerias\Jquery\ui.datepicker-es.js"></script>
<script type="text/javascript" src=".\librerias\date.js"></script>

<script>

var FechaDesde;
var FechaHasta;
var mes;
var dia;
var ano;

function readSelected() {
fecha1();
$("#selectedDatepicker" ).datepicker( "option", "minDate", new Date(ano, mes - 1, dia) );
//$('#selectedDatepicker').val(dia + '/' + mes + '/' + ano);
return {};
}
function readSelected2() {
fecha2();
$("#selectedDatepicker2" ).datepicker( "option", "minDate", new Date(ano, mes - 1, dia) );
$('#selectedDatepicker2').val(dia + '/' + mes + '/' + ano);
return {};
}

function updateSelected(date) {

$('#selectDay').val(date.substring(0, 2));
$('#selectMonth').val(date.substring(3, 5));
$('#selectYear').val(date.substring(6, 10));

$('#selectDay2').val(date.substring(0, 2));
$('#selectMonth2').val(date.substring(3, 5));
$('#selectYear2').val(date.substring(6, 10));
}
function updateSelected2(date) {

$('#selectDay2').val(date.substring(0, 2));
$('#selectMonth2').val(date.substring(3, 5));
$('#selectYear2').val(date.substring(6, 10));
}
function fecha1()
{
mes = document.getElementById("selectMonth").value;
dia = document.getElementById("selectDay").value;
ano = document.getElementById("selectYear").value;

}

function fecha2()
{
mes = document.getElementById("selectMonth2").value;
dia = document.getElementById("selectDay2").value;
ano = document.getElementById("selectYear2").value;

}

function muestra()
{

$('#selectedDatepicker').datepicker({
beforeShow: readSelected,
onSelect: updateSelected,
//minDate: Date.parse('today'),
changeMonth: true,
changeYear: true,
showOn: 'both', buttonImageOnly: true, buttonImage: 'Calendar.gif'});

$('#selectedDatepicker2').datepicker({
beforeShow: readSelected2,
onSelect: updateSelected2,
//minDate: Date.parse('t + 1d'),
changeMonth: true,
changeYear: true,
showOn: 'both', buttonImageOnly: true, buttonImage: 'Calendar.gif'});

}

</script>

</head>
<body onload="muestra()">

<form name="prueba" >

<table>
<tr>
<td>
<select id="selectMonth" onBlur=""><option value="01">Enero</option><option value="02">Febrero</option>
<option value="03">Marzo</option><option value="04">Abril</option><option value="04">Abril</option>
<option value="05">Mayo</option><option value="06">Junio</option><option value="07">Julio</option>
<option value="08">Agosto</option><option value="09">Septiembre</option><option value="10">Octubre</option>
<option value="11">Noviembre</option><option value="12">Diciembre</option>...
</select>
<select id="selectDay">
<option value="01">1</option><option value="02">2</option>
<option value="03">3</option><option value="04">4</option>
<option value="05">5</option><option value="06">6</option>
<option value="07">7</option><option value="08">8</option>
<option value="09">9</option><option value="10">10</option>
<option value="11">11</option><option value="12">12</option>
<option value="13">13</option><option value="14">14</option>
<option value="15">15</option><option value="16">16</option>
<option value="17">17</option><option value="18">18</option>
<option value="19">19</option><option value="20">20</option>
<option value="21">21</option><option value="22">22</option>
<option value="23">23</option><option value="24">24</option>
<option value="25">25</option><option value="25">25</option>
<option value="26">26</option><option value="27">27</option>
<option value="28">28</option><option value="29">29</option>
<option value="30">30</option><option value="31">31</option>
</select>
<select id="selectYear">
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
<input type="hidden" disabled="disabled" id="selectedDatepicker" size="10">
</td>
</tr>
<tr>
<td>
<select id="selectMonth2" onBlur=""><option value="01">Enero</option><option value="02">Febrero</option>
<option value="03">Marzo</option><option value="04">Abril</option><option value="04">Abril</option>
<option value="05">Mayo</option><option value="06">Junio</option><option value="07">Julio</option>
<option value="08">Agosto</option><option value="09">Septiembre</option><option value="10">Octubre</option>
<option value="11">Noviembre</option><option value="12">Diciembre</option>...
</select>
<select id="selectDay2">
<option value="01">1</option><option value="02">2</option>
<option value="03">3</option><option value="04">4</option>
<option value="05">5</option><option value="06">6</option>
<option value="07">7</option><option value="08">8</option>
<option value="09">9</option><option value="10">10</option>
<option value="11">11</option><option value="12">12</option>
<option value="13">13</option><option value="14">14</option>
<option value="15">15</option><option value="16">16</option>
<option value="17">17</option><option value="18">18</option>
<option value="19">19</option><option value="20">20</option>
<option value="21">21</option><option value="22">22</option>
<option value="23">23</option><option value="24">24</option>
<option value="25">25</option><option value="25">25</option>
<option value="26">26</option><option value="27">27</option>
<option value="28">28</option><option value="29">29</option>
<option value="30">30</option><option value="31">31</option>
</select>
<select id="selectYear2">
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
<input type="hidden" disabled="disabled" id="selectedDatepicker2" size="10">
</td>
</tr>
<table>

</form>
</body>
</html>