Date Piker + Calcolo dei giorni

[Mauromatt]

Salve a tutti! ..premetto che sono a digiuno di javascript ..per questo sono qui

Quello che vorrei fare è un form che contenga, oltre ad altri campi, 2 data piker (Partenza - Arrivo), ho bisogno che lo script calcoli i giorni trascorsi e che lo moltiplichi per un prezzo giornaliero.

Potete aiutarmi per favore?

[artorius]

guarda, nella mia esperienza, se devi presentare al cliente un prezzo non usi JS, ma fai tutto lato server, il cliente poi dovrà cliccare solo su "Acquista".

[Mauromatt]

Originariamente inviato da artorius
guarda, nella mia esperienza, se devi presentare al cliente un prezzo non usi JS, ma fai tutto lato server, il cliente poi dovrà cliccare solo su "Acquista".

Devo realizzare un form per una prenotazione senza pagamento diretto,
però vorrei che il cliente possa visualizzare una cmq una cifra preventivo.

Il form dovrà contenere:
Nominativo/Tel/email
Tipo prodotto
Data inizio utilizzo prodotto (con un data piker)
Data fine utilizzo prodotto (con un data picker)

a questo punto lo script calcola i giorni e li moltiplica per il prezzo del Tipo prodotto
visualizzando una cifra x.
Poi il tasto invia mi manda per mail il tutto.

mi puoi aiutare?

[artorius]

Beh, allora se hai già pronto qualcosa ti posso consigliare di usare un paio di Picker che offrono anche un metodo per la gestione di oggetti Date (li ho fatti io, purtroppo non ho ancora pronta la documentazione)

Per usarli devi importare Mootools 1.2.1 (fai

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>

e lo puoi già usare)

Poi ti scarichi i seguenti file:

http://artorius.netsons.org/dateextras/dateextras.js

sono delle estensioni per l'oggetto Date qui c'è un po' di documentazione: http://artorius.netsons.org/new/inde...d=16&Itemid=15

E lo importi nella tua pagina,

Poi scarichi il JS con il Date Picker qui: http://artorius.netsons.org/Pickers/mootools-pickers.js (il date picker è il primo)

ed il CSS, qui http://artorius.netsons.org/css/DatePicker.css
(uso un immagine come pulsante di chiusura http://artorius.netsons.org/img/Close.png )

Importi il tutto nella pagina.

Per far andare il picker:

crei gli elementi input che ti interessano, io ti raccomanderei di usare una tabella:

<table>
<!--
  Qui ci metti gli altri campi
 -->
   <tr>
      <th>Data Inizio</th>
      <td><input type="text" name="dataInizio" id="StartDate" />
   </tr>
   <tr>
      <th>Data Fine</th>
      <td><input type="text" name="dataFine" id="EndDate" />
   </tr>
   <tr>
       <th>Il Prezzo è:</th>
       <td id="Price"></td>
   </tr>
</table> 

Poi fai:

<script type="text/javascript">

var dateFormatter = '%d-%m-%Y';

window.addEvent('domready', function(){
   var startDpicker = new Picker.Date('StartDate', { 
      startMonday : true,
      formatter : dateFormatter
   });
   var endDpicker = new Picker.Date('EndDate', { 
      startMonday : true,
      formatter : dateFormatter
   });

   //Altre inizializzazioni
});
</script>

Questo attiva il date Picker. Se vuoi cambiare il formato della date cambi la variabile dateFormatter (è come il date() di PHP solo che ci metti il % davanti alla lettera).

In fondo alla form ci metti il pulsante "calcola prezzo" con un id (tipo <input type="button" value="Calcola Prezzo" id="CalculatePrice" />)

Poi crei la funzione

var Calculate = function(e){
   if(e)
      e.preventDefault();
   var startD = Date.parseFromFormat($('StartDate').get('value'), dateFormatter);
   var endD = Date.parseFromFormat($('EndDate').get('value'), dateFormatter);
   if(startD.getTime() > endD.getTime()){
      alert("La data di Fine deve essere DOPO la data d'Inizio");
      return;
   }
   //Qui ti ho fatto arrotondato per eccesso
   var daysBetween = Math.ceil((endD.getTime() - startD.getTime()) / 1000 / 60 / 60 / 24);
   
   var prezzo = daysBetween * Costo; //Il costo lo metti tu
   //Se vuoi alterare la variabile lo fai qui
   $('Price').set('text', prezzo);
}

Per lanciare la funzione metti dove ho scritto //Altre inizializzazioni

$('CalculatePrice').addEvent('click', Calculate);

Se hai dei problemi chiedi pure, sarò a casa tra una mezzoretta e ti risponderò allora.

[Mauromatt]

Grazie fratello per la tua disponibilità!

sto provando a far funzionare lo script ho un pò di problemi (con il css credo) data la mia immensa ignoranza in materia!

..ora devo uscire...domani in mattinata ritento nell'impresa...non ti libererai facilemente di me!

Grazie

[Mauromatt]

Per il momento ho fatto questo intruglio!

Quello che vorrei fare è una cosa così!

[artorius]

beh, non hai importato il CSS in modo corretto, controlla il path che hai usato.

[Mauromatt]

Originariamente inviato da artorius
beh, non hai importato il CSS in modo corretto, controlla il path che hai usato.

qual'è la riga essatta per importarlo?

[artorius]

<link href="DatePicker.css" type="text/css"/>

ma devi mettere in href il path, ovvero come giungere al file dalla pagina in cui ti trovi (per esempio metti di avere il css nella directory /style, mentre la pagina è nella directory /contatti per arrivarci devi andare indietro di una ed in su di una, quindi:

<link href="../style/DatePicker.css" type="text/css"/> )

[Mauromatt]

Originariamente inviato da artorius
<link href="DatePicker.css" type="text/css"/>

ma devi mettere in href il path, ovvero come giungere al file dalla pagina in cui ti trovi (per esempio metti di avere il css nella directory /style, mentre la pagina è nella directory /contatti per arrivarci devi andare indietro di una ed in su di una, quindi:

<link href="../style/DatePicker.css" type="text/css"/> )

Ho inserito il tuo comando con l'aggiunta di "REL=StyleSheet" non so a cosa serve! ma l'ho preso da un esempio in rete.
Non capisco perchè ora il campo testo delle date risulta tagliato....