problema con Datapicker

[fradamma]

ciao a tutti,
torno a darvi fastidio sperando possiate ulteriormente risolvermi un problemino.
Questa volta devo settare un datapicker. Devo dare la possibilità all'utente di poter scegliere un range di periodo. il problema è che i campi delle due date saranno divisi in tre per giorno mese anno. Forse mi spiego meglio con il codice:

	<div class="dataPicker">
			<div class="labelTop">
				<label for="from" id="daLabel">Da</label><input type="text" id="giorno" name="day" value="GG" /><input type="text" id="mese" name="month" value="MM"/><input type="text" id="anno" name="year" value="AAAA" />
			</div>
			<div class="labelBottom">
				<label for="from" id="daLabel">a</label><input type="text" id="giorno" name="day" value="GG"/><input type="text" id="mese" name="month" value="MM"/><input type="text" id="anno" name="year" value="AAAA" />
			</div>
			<button value=""></button>
		</div>

Da ---> tre campi per inserire la data di partenza GG + MM + AA
a ---> sempre tre campi per inserire la data di arrivo GG + MM + AA

come faccio a prendere i tre valori?
Grazie e buona serata!

 

[criric]

Ciao, per prima cosa non puoi assegnare lo stesso id a più di un elemento altrimenti il javascript genererà un errore

 

[fradamma]

Si scusa..non me ne ero accorto. Allora, sono arrivato a questo punto utilizzando fondation datapicker (il mio sito è in foundation) :

<div class="dataPicker">
	<div class="labelTop">
		<label class="daLabel">Da</label>
		<input type="text" class="span2" value="gg-mm-aaaa" id="dpd1"  />
	</div>
	<div class="labelBottom">
		<label class="daLabel">a</label>
		<input type="text" class="span2" value="gg-mm-aaaa" id="dpd2"  />
	</div>
	<input type="submit" id="mainForm" class="" value="" onclick="" />
</div>

mentre il js è questo (ho commentato la prima parte perchè sembra non servire:

<script>

		$(function () {
				/*window.prettyPrint && prettyPrint();
				$('#dp1').fdatepicker({
					format: 'dd-mm-yyyy'
				});
				$('#dp2').fdatepicker({
					closeButton: true
				});
				$('#dp3').fdatepicker();
				$('#dp3').fdatepicker();
				$('#dp-margin').fdatepicker();
				$('#dpYears').fdatepicker();
				$('#dpMonths').fdatepicker();
				var startDate = new Date(2012, 1, 20);
				var endDate = new Date(2012, 1, 25);
				$('#dp4').fdatepicker()
					.on('changeDate', function (ev) {
					if (ev.date.valueOf() > endDate.valueOf()) {
						$('#alert').show().find('strong').text('The start date can not be greater then the end date');
					} else {
						$('#alert').hide();
						startDate = new Date(ev.date);
						$('#startDate').text($('#dp4').data('date'));
					}
					$('#dp4').fdatepicker('hide');
				});
				$('#dp5').fdatepicker()
					.on('changeDate', function (ev) {
					if (ev.date.valueOf() < startDate.valueOf()) {
						$('#alert').show().find('strong').text('The end date can not be less then the start date');
					} else {
						$('#alert').hide();
						endDate = new Date(ev.date);
						$('#endDate').text($('#dp5').data('date'));
					}
					$('#dp5').fdatepicker('hide');
				}); */
				// implementation of disabled form fields
				var nowTemp = new Date();
				var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
				var checkin = $('#dpd1').fdatepicker({
					onRender: function (date) {
						return date.valueOf() < now.valueOf() ? 'disabled' : '';
					}
				}).on('changeDate', function (ev) {
					if (ev.date.valueOf() > checkout.date.valueOf()) {
						var newDate = new Date(ev.date)
						newDate.setDate(newDate.getDate() + 1);
						checkout.setValue(newDate);
					}
					checkin.hide();
					$('#dpd2')[0].focus();
				}).data('datepicker');
				var checkout = $('#dpd2').fdatepicker({
					onRender: function (date) {
						return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
					}
				}).on('changeDate', function (ev) {
					checkout.hide();
				}).data('datepicker');
			});
	

  //toggle per far apparire/sparire il datpicker al click su un ancora

	function displayDataPicker(e){
		//e.preventDefault();
		$(".dataPicker").slideToggle("slow");
		$(".dataPicker input").blur(function(){
			$(this).text("");
		});
	}

</script>

il datapicker si visualizza, dopo dovrò al click sul submit far partire una funzione per la ricerca. Ora i miei principali problemi sono due:
- cercare di "azzerare" il value degli input ogniqualvolta clicco sul link del toggle perchè è brutto ogni volta vedere i campi con le date selezionate in precedenza;
- soprattutto devo assolutamente creare 3 campi (giorno mese anno) per la data di partenza e 3 campi (sempre giorno mese anno) per la data di arrivo. E relativamente prenderne i valori da inviare...quindi per ogni data non un unico campo input, bensì tre spezzettando giorni mesi e anno....

 

[fradamma]

il primo punto l ho risolto così:

function displayDataPicker(e){
		//e.preventDefault();
		$(".dataPicker").slideToggle("slow", function(){
			$("input.span2").val("")
		});
	
	}

Inoltre ho dovuto modificare un tantino il datapicker inserendo tutto in un form:

	<div class="dataPicker">
			<form id="mainForm" class="ricerca" method="post" action="/ricerca.html" name="mainForm">
				<div class="labelTop">
					<label class="daLabel">Da</label>
					<input type="text" class="span2" value="gg-mm-aaaa" id="dpd1" name="" />
				</div>
				<div class="labelBottom">
					<label class="daLabel">a</label>
					<input type="text" class="span2" value="gg-mm-aaaa" id="dpd2" name=""  />

				</div>
				<input type="submit" class="" id="btn" value="" onclick="" />
			</form>
	</div>

 

[criric]

io eviterei il javascrpt, guarda questa soluzione in php, l'ho scritta un po di tempo fa magari ha bisogno di una rinfrescata

 

[fradamma]

Grazie Criric, però il php non lo posso utilizzare...ordini "dall'alto"
PS. perchè mi dici di evitare il javascript? sarebbe troppo complesso implementare una cosa del genere? Tra l'altro sto anche spulciando tra la documentazione di jqueryUI relativa ai datepicker e roba del genere non esiste....almeno non è documentata sembra...

 

[criric]

perchè mi dici di evitare il javascript?

per fare 6 select non è necessario,
in più modificare un plugin così pesantemente diventerebbe molto complesso, fai prima a scriverlo da zero
puoi benissimo trasformare il php che ti ho postato in semplice html, dipende poi da cosa ti hanno chiesto di fare

 

[fradamma]

per fare 6 select non è necessario,
in più modificare un plugin così pesantemente diventerebbe molto complesso, fai prima a scriverlo da zero
puoi benissimo trasformare il php che ti ho postato in semplice html, dipende poi da cosa ti hanno chiesto di fare[/QUOT

Devo praticamente valorizzare i campi e settare valori hidden del periodo. Per questo mi forniranno 6 ID. Per esempio (searchForm_giornoInizio, searchForm_meseInizio, searchForm_annoInizio, searchForm_giornoFine, searchForm_meseFine, searchForm_annoFine)...
Alla base di tutto cè questo, per il momento l'input data può essere unico e non spezzettato in 3...

 

[fradamma]

mi scuso...ho scritto proprio male:

praticamente (tenendo conto che resta il singolo campo input per le due date, per il momento nn tengo conto dello "spezzare" il campo) devo valorizzare dei campi hidden di input con id che mi forniranno ( per giorno, mese, anno) e al submit inviarli. Credo che avrò una cosa del genere in hidden:

<input type="text" name="searchFormGiornoInizio.query" value="" id="searchFormGiornoInizio"/>
<input type="text" name="searchFormMeseInizio.query" value="" id="searchFormMeseInizio"/>
<input type="text" name="searchFormAnnoInizio.query" value="" id="searchFormAnnoInizio"/>

<input type="text" name="searchFormGiornoFine.query" value="" id="searchFormGiornoFine"/>
<input type="text" name="searchFormMeseFine.query" value="" id="searchFormMeseFine"/>
<input type="text" name="searchFormAnnoFine.query" value="" id="searchFormAnnoFine"/>

In base al datapicker di sopra, come posso fare?