Ukázka kódu
html: <input id="date1" name="date1" type="text" value="12.12.2012"/>
js: new Datepicker().make("date1", "d.m.yyyy")
Ukázka kódu
html: <input id="date2" name="date2" type="text" value=""/>
js: new Datepicker().make("date2", "yyyy-mm-dd", {inputEdit: false})
Ukázka kódu
html: <input id="date3" name="date3" type="text" value=""/>
js: new Datepicker().make("date3", "dd.mm.yyyy", {inputEdit: false, initStr: "10.10.2010"})
Doporučení: pro správné zobrazení ukázkových příkladů je vhodné použít moderní prohlížeč s podporou CSS3 (vlastnosti gradient, shadow, rgba()). Např. Firefox či Chrome v aktualizované verzi.
Zobrazit pouze demoKalendář představuje javascriptovou třídu, která byla implementována v javasciptu bez pomoci extrerních knihoven. Kalendář postihuje zadání projektu v celé šíři.
Funkčnost kalendáře byla úspěšně testována na prohlížečích Firefox v11, Chrome v18 a IE 8.
Nalinkovaní javascriptového souboru datepicker.js do hlavičky vašeho HTML dokumentu.
<head>
...
<script type="text/javascript" src="datepicker.js"></script>
</head>
Pro vytvoření kalendáře je nutné mít k dispozici libovolné textové vstupní pole v HTML kódu opatřené identifikátorem (id).
<input id="date" name="date" type="text" />
Vytvoření kalendáře - vytvoření instance třídy Datepicker a zavolání metody make().
<head>
...
<script type="text/javascript">
window.onload = function() { new Datepicker().make("date", "dd.mm.yyyy"); };
</script>
</head>
1. parametr metody make() určuje identifikátor textového pole.
2. parametr metody make() specifikuje formát data, ve které bude datum vloženo do textového pole. Jako akceptované znaky pro definici formátovacího data slouží znaky uvedené v tabulce.
| značka | význam | upřesnění |
|---|---|---|
| yyyy | rok, 4-ciferné číslo | 2012 |
| yy | rok, poslední dvojčíslí | 12 pro rok 2012 |
| d | den, 1 nebo 2-ciferné číslo | 1 až 31 |
| dd | den, 2-ciferné číslo | 01 až 31 |
| m | měsic, 1 nebo 2-ciferné číslo | 1 - Leden až 12 - Prosinec |
| mm | měsic, 2-ciferné číslo | 01 - Leden až 12 - Prosinec |
3. parametr metody make() je nepovinný, představuje pole, které specifikuje další dodatečná nastavení.
new Datepicker().make("datum1", "d.m.yyyy", {inputEdit: true});
new Datepicker().make("datum2", "yyyy-mm-dd", {initStr: "2011-06-25"});
var cal = new Datepicker();
cal.make("datum3", "d.m.yyyy", {inputEdit: false, initStr: "25.6.2012"});
| proměnná | význam | upřesnění |
|---|---|---|
| inputEdit | zakázání/povolení přímé editace vstupního pole. | true - povolení, false - zakázání. Defaultně nastaveno na true. |
| initStr | inicializační datum, na které se nastaví kalendář. | Inicializační datum musí odpovídat formátovacímu stringu specifikovaný 2.parametrem. Pokud inicializační string není zadán, je kaledář inicializován aktuálním datem. |
V případě, že textové pole obsahuje hodnotu, je jí inicializován kalendář. Formát data musí odpovídat zadanému formátovacímu řetezci.
<input id="date" name="date" type="text" value="25.6.2015"/>
Třída Datepicker poskytuje následují interface, pomocí kterého lze s třídou komunikovat.
| metoda | popis |
|---|---|
| make(id, format, params) | vytvoří kalendář, typicky zavolána pouze jednou na začatku. Význam parametrů vysvětlen výše. |
| showCalendar() | zobrazí kalendář |
| hiddeCalendar() | skryje kalendář |
| toggleCalendar() | zobrazí/skryje kalendář |
| prevMonth() | nastaví kalendář na předchozí měsíc |
| nextMonth() | nastaví kalendář na následující měsíc |
| writeDate(dateObj) | zapíše datum do input pole, se kterým je kalednar asociován. Parametr dateObj je standardni objekt Date |