calendario in un form

**flyfly2301** · 13-11-2012, 18:48

salve a tutti, devo inserire in un form 'data di arrivo': CALENDARIO, con i giorni e mesi, ed il formato in italiano, qual è il metodo più semplice per farlo? grazie in anticipo

**unkus_nob** · 13-11-2012, 19:57

prova con il datepicker jquery

**flyfly2301** · 13-11-2012, 19:58

mi potresti spiegare meglio e nello specifico?

**unkus_nob** · 13-11-2012, 20:10

crei una funzione javascript:

codice:

$(function() {
        $("#datepicker").datepicker({
                inline: true,
                dateFormat: "dd-mm-yy",
		firstDay: 1,
		showOtherMonths: true,
		dayNamesMin: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
                monthNames:['Gennaio', 'Febbraio', 'Marzo', 'Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre', 'Dicembre'],
                monthNamesMin:['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'],
                onSelect: function() {
                       nomeFunzione();
                }
                                              
         }).datepicker('setDate', '0');
});

e poi nel codice html metti:

codice:

   <form name="nameform" id="idform">
         <input id="datepicker" name="dataCalendario">
       </form>

ovviamente devi aver incorporato jquery e jquery-ui mi pare....
per le specifiche basta guardare quì http://jqueryui.com/datepicker/ c'è tutto quello che ti serve

**flyfly2301** · 13-11-2012, 20:31

ma dopo che clicco sulla data di mio interesse perchè il calndario non si chiude???

**unkus_nob** · 13-11-2012, 21:27

a me si chiude....

**flyfly2301** · 13-11-2012, 21:29

prova un pò: (fai copia e incolla e vedi )

<?xml version = "1.0"? encoding="utf-8"?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>CPoW - Inserimento nuova offerta di viaggio</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<script>
$(function() {
$("#datepicker").datepicker({
inline: true, dateFormat: "dd-mm-yy", firstDay: 1, showOtherMonths: true,
dayNamesMin: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
monthNames:['Gennaio', 'Febbraio', 'Marzo', 'Aprile','Maggio','Giugno','Luglio','Agosto','Sett embre','Ottobre','Novembre', 'Dicembre'],
monthNamesMin:['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','S et','Ott','Nov','Dic'],
onSelect: function() {
nomeFunzione();
}
}).datepicker('setDate', '0');
});
</script>
</head>

<body>
<h1>Inserimento nuova offerta di viaggio</h1>
<form name = "modulo" method = "post" action = "">

<ul>
[*]

<label>Citta' di partenza*:
<input name = "cittaPartenza" type = "text" size = "20" maxlenght = "20" />
</label></p>

[*]

<label>Citta' di arrivo*:
<input name = "cittaArrivo" type = "text" size = "20" maxlenght = "20" />
</label></p>

[*]

<label>Data di partenza*:
<input type="text" id="datepicker" />

<label>Ora*:
<input type = "number" name = "hh" min = "00" max = "24" step = "1" />
:
<input type = "number" name = "mm" min = "00" max = "45" step = "15" />
</label></p>

[*]

<label>Data di arrivo:
<input type="text" id="datepicker1" />

<label>Ora*:
<input type = "number" name = "hh" min = "00" max = "24" step = "1" />
:
<input type = "number" name = "mm" min = "00" max = "45" step = "15" />
</label></p>

[*]

<label>Flessibilita'*:
<select name="flessibilitagg"/>
<option selected = "selected">00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
</select> giorni

<select name="flessibilitaore"/>
<option selected = "selected">00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select> ore
</label>
</p>

[*]

<label>Veicolo:

<textarea name = "veicolo" rows = "4" cols = "30">
</textarea>Inserisci qui la descrizione del tuo veicolo
</label></p>

[*]

<label>Costo*:
<input name = "costoViaggio" type = "text" size = "5" maxlenght = "5" /> euro/persona
</label></p>

[*]

<label>N. Posti*:
<select name="nPosti"/>
<option selected = "selected">01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
</select>
</label></p>

[*]

<label>Note:

<textarea name = "note" rows = "4" cols = "30">
</textarea>Descrivi qui il tuo comportamento durante il viaggio ed eventuali altre info
</label></p>

[/list]
</br>

<input type = "submit" value = "Conferma dati inseriti" />
<input type = "reset" value = "Resetta tutti i campi" />
</p>

*I campi sono obbligatori.</p>
</form>
</body>
</html>

inoltre non mi funziona ora 'data di arrivo'-- dovrebbe uscire l'altro calendario

Discussione: calendario in un form

Strumenti discussione

Ricerca discussione

Visualizza

calendario in un form

Permessi di invio