Differenza tra date in box di testo

[LukeST79]

Ciao a tutti! sono nuovo del forum ed è da poco che cerco di fare qualcosa in html, infatti mi sono bloccato su una cosa che potrebbe essere banale per molti qui dentro

Ho creato un datepicker-start ed un datepicker-end. Ora voglio inserire la differenza tra le date che scelgo dal calendario in un box di testo ma non riesco a capire come fare...ecco un estratto. L'oggetto con label night/Nacht è il textbox dentro il quale vorrei inserire i giorni di differenza tra una data ed un'altra...

codice :

<div class="two columns half-top">
<label for="datepicker-start">Anreise</label>
<input type="text" id="datepicker-start" name="from" class="required" />
</div>
<div class="two columns half-top">
<label for="datepicker-end">Abreise</label>
<input type="text" id="datepicker-end" name="to" class="required" /> </div>
<div class="two columns half-top">
<label for="night">Nacht</label>
<input type="text" id="night" name="night"> </div>


per intenderci, se col datepicker-start scelgo il 1 Gennaio 2013 e col datepicker-end scelgo 3 Gennaio 2013, vorrei far comparire nel box di testo night il valore 2 che arebbe la differenza tra le date : 3 - 1 = 2;

ho provato ad inserire un pezzo di codice in php usando datetime::diff ma non sembra funzionare
<?php
$datetime1 = date_create('datepicker-start');
$datetime2 = date_create('datepicker-end');
$interval = date_diff($datetime1, $datetime2);
echo $interval->format('%R%a days');
?> ...Aiuto!

[delta_machine]

potresti provare con Javascript

<div class="two columns half-top">
<label for="datepicker-start">Anreise</label>
<input type="text" id="datepicker-start" name="from" class="required" onblur="javascript:calcola()"/>
</div>
<div class="two columns half-top">
<label for="datepicker-end">Abreise</label>
<input type="text" id="datepicker-end" name="to" class="required" onblur="javascript:calcola()" /> </div>
<div class="two columns half-top">
<label for="night">Nacht</label>
<input type="text" id="night" name="night"> </div>

<script language="javascript">
function calcola(){
var selDate1=document.getElementById("datepicker-start").value;
var selDate2=document.getElementById("datepicker-end").value;
if (selDate1 !="" && selDate2 !=""){
var date1 =new Date(selDate1);
var date2 =new Date(selDate2);
var diff_date=date1.getTime() - date2.getTime();

diff_days = new String(diff_date/86400000);
night.value=diff_days;
}else{
night.value="";
}

}

</script>

[LukeST79]

ho provato a copiare il codice ma non succede nulla
forse devo inserire qualcosa in night?

[delta_machine]

a me funziona, scelgo una data da datepicker-start, poi mi sposto sulla datepicker-end scelgo la seconda data poi mi sposto con un click sulla textbox night, e viene eseguito il calcolo, io l'ho attivato sull'evento onBlur delle due textbox (scatta quando perde il focus) ma puoi attivarlo su un click di un pulsante o come preferisci

[LukeST79]

oddio...sono veramente alle prime armi con html e nn so dove mettere le mani...programmo in c/c++...cos'è l'evento onBlur? grazie per la pazienza concittadino

edit : magari devo salvare la pagina in altro formato invece che in html?

[delta_machine]

una cosa sola, se non ti funziona potresti avere javascript disabilitato nel tuo browser, lo puoi abilitare seguendo queste istruzioni a seconda del browser che utilizzi [URL=http://www.enable-javascript.com/it/]

[delta_machine]

onBlur è un evento della textbox che scatta quando la textbox perde il focus.

Fai una cosa segui le istruzioni che ti ho dato cioè selezioni le date nelle due text e poi spostati con il mouse nulla text night.

Se non ti funziona allora di sicuro hai javascript disabilitato, per abilitarlo segui le istruzioni nel link che ti ho fornito a seconda del browser che utilizzi.

come pagina va benissimo il formato html

[LukeST79]

provato...è abilitato

[LukeST79]

ti posso mandare tutto l'index? scusami in anticipo se abuso della tua pazienza...è il sito di mio zio che sto cercando di fare...

[delta_machine]

allora proviamo a fare diversamente: non utilizziamo onBlur ma calcoliamo solo al click su un pulsante "calcola giorni" vedi se cosi ti funziona

<div class="two columns half-top">
<label for="datepicker-start">Anreise</label>
<input type="text" id="datepicker-start" name="from" class="required" />
</div>
<div class="two columns half-top">
<label for="datepicker-end">Abreise</label>
<input type="text" id="datepicker-end" name="to" class="required" /> </div>
<div class="two columns half-top">
<label for="night">Nacht</label>
<input type="text" id="night" name="night"> </div>
<input type="button" id="btncalcola" name="btncalcola" onclick="calcola()" value="calcola giorni" />


<script language="javascript">
function calcola(){
var selDate1=document.getElementById("datepicker-start").value;
var selDate2=document.getElementById("datepicker-end").value;
if (selDate1 !="" && selDate2 !=""){
var date1 =new Date(selDate1);
var date2 =new Date(selDate2);
var diff_date=date1.getTime() - date2.getTime();

diff_days = new String(diff_date/86400000);
night.value=diff_days;
}else{
night.value="";
}

}

</script>