problema con Datapicker

fradamma

Utente Attivo
28 Set 2012
93
0
0
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:

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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, per prima cosa non puoi assegnare lo stesso id a più di un elemento altrimenti il javascript genererà un errore
 

fradamma

Utente Attivo
28 Set 2012
93
0
0
Si scusa..non me ne ero accorto. Allora, sono arrivato a questo punto utilizzando fondation datapicker (il mio sito è in foundation) :

Codice:
<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:

Codice:
<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

Utente Attivo
28 Set 2012
93
0
0
il primo punto l ho risolto così:

Codice:
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:

Codice:
	<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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
io eviterei il javascrpt, guarda questa soluzione in php, l'ho scritta un po di tempo fa magari ha bisogno di una rinfrescata
 

fradamma

Utente Attivo
28 Set 2012
93
0
0
Grazie Criric, però il php non lo posso utilizzare...ordini "dall'alto" :D
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
28 Set 2012
93
0
0
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

Utente Attivo
28 Set 2012
93
0
0
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:

Codice:
<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?