Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<form action="http://www.owebu.org/data.php" method="post"> <label>Datum: </label><input type="text" name="datum" onkeyup="skryjKalendar()" style="width:100px;"> <img src="css/kalendar.png" onclick="zobrazSkryjKalendar(m,r)" alt="kalendář" title="kalendář" height="24" width="24" style="cursor:pointer; vertical-align:bottom; position:relative; top:-2px;"><br> <input type="submit" value="Odeslat" style="margin-left:67px; margin-top:5px; width:103px;"> <div id="kalendar"></div> </form> <br><br> <form action="http://www.owebu.org/data.php" method="post"> <label>Datum: </label><input type="text" name="datum" onkeyup="skryjKalendar()" style="width:100px;"> <img src="css/kalendar.png" onclick="zobrazSkryjKalendar(m,r)" alt="kalendář" title="kalendář" height="24" width="24" style="cursor:pointer; vertical-align:bottom; position:relative; top:-2px;"><br> <input type="submit" value="Odeslat" style="margin-left:67px; margin-top:5px; width:103px;"> <div id="kalendar"></div> </form>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
<!-- var datum=new Date(); //aktuální datum var d=datum.getDate(); //den var m=datum.getMonth()+1; //měsíc var r=datum.getFullYear(); //rok function kalendar(mesic,rok) { var dnes=new Date(); //aktuální datum var nazevMesice=new Array("","leden","únor","březen","duben","květen","červen","červenec","srpen","září","říjen","listopad","prosinec"); var datum=new Date(rok,mesic-1,1); //1. den v zadaném měsíci - v JavaScriptu se měsíce číslují od 0, proto musíme odečíst 1 var denTyd=datum.getDay(); //číslo dne v týdnu 0-neděle, 1-pondělí,... 6-sobota if(denTyd==0) {denTyd=7;} //změníme číslo neděle na 7 //alert(datum.toLocaleString()); var pocetDniMesice = new Array(0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //počet dní v měsíci if (((rok % 4 == 0) && (rok % 100 != 0)) || (rok % 400 == 0)) pocetDniMesice[2] = 29; //přestupný rok - únor 29 dní var tab="<table><thead><tr><th onclick='pred()'>‹‹</th><th colspan='5'>"+nazevMesice[mesic]+" "+rok+"</th><th onclick='dal()'>››</th></tr></thead><tbody><tr><th>Po</th><th>Út</th><th>St</th><th>Čt</th><th>Pá</th><th>So</th><th>Ne</th></tr><tr>"; for(i=1; i<denTyd; i++) { tab+="<td></td>"; //prázdné buňky před 1. dnem měsíce } for(den=1; den<=pocetDniMesice[mesic]; den++) { if(rok==dnes.getFullYear() && mesic==dnes.getMonth()+1 && den==dnes.getDate()) {styl="dnes";} //else if(rok==r && mesic==m && den==d) {styl="akt";} else {styl="";} tab+="<td onclick='vloz(this)' class='"+styl+"'>"+den+"</td>"; if(i % 7 == 0 && den!=pocetDniMesice[mesic]) {tab+="</tr><tr>";} i++; } for(i=i-1; i % 7 !=0; i++) { tab+="<td></td>"; //prázdné buňky za posledním dnem měsíce pro dokončení tabulky } tab+="</tr></tbody></table>"; return tab; } function dal() { //funkce je spuštěna kliknutím na >> v kalendáři if(m==12) {r++; m=1;} else {m++;} zobrazKalendar(m,r); } function pred() { //funkce je spuštěna kliknutím na << v kalendáři if(m==1) {r--; m=12;} else {m--;} zobrazKalendar(m,r); } function vloz(td) { document.getElementsByName("datum")[0].value=td.innerHTML+"."+m+"."+r; skryjKalendar(); } function zobrazKalendar(mesic,rok) { document.getElementById("kalendar").innerHTML=kalendar(mesic,rok); //vytvoření kalendáře document.getElementById("kalendar").style.display="block"; //zobrazení kalendáře } function skryjKalendar() { document.getElementById("kalendar").innerHTML=""; document.getElementById("kalendar").style.display="none"; } function zobrazSkryjKalendar() { //funkce spuštěna při kliknutí na ikonu kalendáře ve formuláři if(document.getElementsByName("datum")[0].value!="" && document.getElementById("kalendar").innerHTML=="") { var dat=new Array(); dat=document.getElementsByName("datum")[0].value.split("."); //rozdělení zapsaného datumu na části if(dat.length==3 && dat[1]>=1 && dat[1]<=12 ) {d=dat[0]; m=dat[1]; r=dat[2];} } if(document.getElementById("kalendar").style.display!="block") {zobrazKalendar(m,r);} else {skryjKalendar();} } //-->
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>