[SOLUCIONADO] <div id="datepicker"> a <input type="hidden" name="fecha">

[quico5]

Estoy buscando la manera mediante jQuery de extraer el contenido y pasar los tres parámetros al <input> separados por guiones altos

Código HTML:

<td class="active day">4</td>
<span class="month active">Jun</span>
<span class="year active">2014</span> 

formato -> d-m-y

he pensado en hacerlo así porque genera un calendario grafico, pero en contra no parece que facilite el envió por <input>

Fragmento de código del Datepicker Bootstrap

Código HTML:

<div id="datepicker">
...
<td class="day">3</td>
<td class="active day">4</td>
<td class="day">5</td>
...
<span class="month">May</span>
<span class="month active">Jun</span>
<span class="month">Jul</span>
...
<span class="year">2013</span>
<span class="year active">2014</span>
<span class="year">2015</span>
...
</div>

<input type="hidden" name="fecha"> 

[Alexis88]

Si entendí bien lo que dijiste, quieres asignar al <input> la fecha unificada de los <span> con la clase active, ¿Es así? Pues, en ese caso, bastaría con que recorras con un bucle a todos los <span> contenidos en el <div> de id datapicker y verifiques la clase de cada uno de ellos. Cuando ocurran coincidencias, asignas sus contenidos a variables, las cuales unificarás y asignarás como contenido al <input>.



Saludos

[quico5]

Genial, aunque el día va en <td>
Intentare integrarlo, por cierto ¿Se ejecuta cada vez que selecciono un día el calendario?

Creo que seria algo asi

$(document).ready(function(){
$(window)
.click(fecha);
function fecha(){SCRIPT}
}

Retoques que no creo que den problemas

var spans = $("#datepicker .active"),
total = spans.length,
fecha = $("input[name=fecha]"),
day, month, year;

for (i = 0; i < total; i++) {
if (tds[i].className == "day active")
day = spans[i].innerHTML + "/";
if (spans[i].className == "month active")
month = spans[i].innerHTML + "/";
if (spans[i].className == "year active")
year = spans[i].innerHTML;
}

fecha.val(day + month + year);

[quico5]

Quizas se deba a que el calendario se genera por jQuery...

Me devuelve NaN con load, y sin load no devuelve nada, uso chrome, probare con firefox

$(window).click(fecha).load(fecha);
function fecha(){
var spans = $("#datepicker .active"),
total = spans.length,
fecha = $("input[name=fecha]"),
day, month, year;

for (i = 0; i < total; i++) {
if (tds[i].className == "day active")
day = spans[i].innerHTML + "/";
if (spans[i].className == "month active")
month = spans[i].innerHTML + "/";
if (spans[i].className == "year active")
year = spans[i].innerHTML;
}

fecha.val(day + month + year);
}

[Alexis88]

Hice algunas modificaciones para que varíe según la fecha elegida.



Cuando se elija una fecha con el datepicker y se cierre el calendario (onClose), aplico el código que ya teníamos previamente, pero como función. Como el mes está dado en números, creo un array con los nombres abreviados de los meses (como mostraste en el ejemplo) para que se muestre el nombre correspondiente al mes seleccionado.

Saludos

[quico5]

estoy pensando que como son únicos se podría evitar recorrerlos todos

Mejor te muestro como tengo los formularios
http://188.86.253.93/login

si te gijas, el ultimo campo abajo a la derecha es el input con datepicker y encima de el esta otro datepicker que lo usare para controlar el input que ocultare

[Alexis88]

En ese caso, creo que esto sería lo que buscas:

[quico5]

Genial, aunque no uso el datepicker original, uso el de bootstrap que tiene algunas adaptaciones al framework, voy a probar el codigo como lo tienes, gracias

[Alexis88]

En ese caso, te recomendaría usar el de jQuery UI que es el que utilicé para el ejemplo. Esta es la API con todos los métodos y propiedades para que los utilices.

Saludos

[quico5]

me suena que tenia alguna incompatibilidad el datepicker original con bootstrap, de todas formas voy a probarlo, gracias

[Alexis88]

También podrías buscar las propiedades y métodos equivalentes en Bootstrap para que no tengas que mudar de librería o añadir otra.

[quico5]

Creo que esta seria la API pero no he encontrado la forma de llevarlo a cabo http://bootstrap-datepicker.readthed...st/markup.html

de todas formas tu ejemplo parece simple y compactible con Bootstrap3, por lo que cambiando levemente el CSS del datepicker también me vale

veo que en el datepicker original no hay un archivo dedicado a la traducción, en su lugar hay que traducirlo en el propio script que personaliza el calendario

me suena que puedo usar "data-date="2012-01-02" para pesarle una fecha al calendario según vaya correspondiendo

Código HTML:

<center><div id="datepicker" data-date="2012-01-02" style="margin-bottom:0;">
</div></center>
<br>
<input type="text" class="form-control" name="fecha" placeholder="Fecha" id="datepicker2" value="<?=isset($this->datos['fecha'])?$this->datos['fecha']:null?>"> 

[quico5]

Esta primera la puse aquí porque solo quiero que se aplique a editar mediante PHP, pero aqui no parece ser aceptada

<script>$(function() { $("#datepicker").datepicker("setDate", "11/11/2011") });</script>

<center><div id="datepicker" style="margin-bottom:0;"></div></center>

[quico5]

trasladando esto a los dos formularios me funciona el ajuste de fecha en el formulario editar

<script>
$(function() {
fecha = $("input[name=fecha]");
$("#datepicker").datepicker({
onSelect: function(date){
var picker = date.split("/"),
nuevo = picker[0] + "-" + picker[1] + "-" + picker[2];
fecha.val(nuevo);
}
});
});
</script>