Volba data v popup okně

19. listopadu 2002

•

Způsobů, jak usnadnit uživateli zadávání data s využitím JavaScriptu, je celá řada, některé z nich byly publikovány i zde na Intervalu. V tomto článku si popíšeme zadávání data stylem, převzatým z Windows dialogů, tedy výběr data pomocí malého plovoucího okna s tabulkou dnů v aktuálním měsíci.

Popis požadovaného chování by byl poněkud krkolomný, proto raději začneme s ukázkou. V ní můžete zadávat datum buď přímo do textových polí, nebo kliknutím na odkaz „Vybrat“.

Volající stránka

V popsaném řešení jsou použity dvě HTML stránky, první s jednoduchým formulářem, který jste před chvílí viděli, druhá pak s kódem „popup“ okna, tedy samotným kalendářem. Popíšeme si nejprve kód první stránky, který je jednodušší.

V HTML kódu formuláře stojí za povšimnutí snad jen to, že se formulář jmenuje „main“, toto jméno totiž použijeme později pro odkaz na formulář. Názvy polí formuláře, jež je třeba naplnit, předáváme do funkce ShowDialog jako parametr:

<form name=“main“><p>
Datum od: <input type=“text“ name=“date_from“ > <a href=“javascript:void(0)“ onClick=“ShowDialog(‚date_from‘)“>Vybrat</a> <br>
Datum do: <input type=“text“ name=“date_to“ > <a href=“javascript:void(0)“ onClick=“ShowDialog(‚date_to‘)“>Vybrat</a>
</p></form>

V hlavičce stránky definujeme funkci ShowDialog, která má za úkol otevřít popup okno s kalendářem. Pole, které je třeba naplnit, uchováme v globální proměnné theField. Funkce HideDialog zabezpečuje skrytí popup okna v případě, že je uživatel zapomene zavřít a přepne se zpět do volajícího okna:

Funkci HideDialog voláme v ovladači události onFocus na elementu body:

Poslední částí kódu ve „volající“ HTML stránce je funkce Transfer. Ta bude volána z popup okna poté, co uživatel vybere nějaké datum, a má za úkol přenést ve volajícím okně naformátované datum do příslušného formulářového políčka (jehož handle máme uloženo v globální proměnné theField):

function Transfer( theValue ) {
if( theField != null ) theField.value = theValue;
}

JavaScript v kódu popup okna je poměrně dlouhý, ač není příliš složitý. Protože se však jedná o částečně modifikovaný kód „Měsíčního kalendáře“, který byl již zde na Intervalu podrobně popsán v jednom z dřívějších článků, popíšeme si zde pouze stručně jeho funkci. Zájemci o podrobný popis nechť prostudují původní článek.

Jak tedy pracuje kód pro zobrazení kalendáře? Kód vypisuje dvě tabulky – první slouží pro navigaci mezi měsíci a roky, druhá obsahuje výpis dnů v aktuálním měsíci. Pokud uživatel zvolí v navigační tabulce jiný měsíc nebo rok, je proveden „reload“ okna a údaj o nově zvoleném měsíci a roku je předán prostřednictvím parametrů v URL adrese (nejsou-li parametry zadány, vypisuje se aktuální měsíc aktuálního roku).

Volbu konkrétního dne provede uživatel kliknutím na jeho číslo v druhé tabulce. Po kliknutí je volána funkce Transfer, která naformátuje zadané datum do textového řetězce a toto datum poté předá pomocí svého „dvojčete“ ve volající stránce zpět. Jako poslední akce následuje uzavření popup okna.

Výpis celého kódu použitého v hlavičce popup okna najdete v samostatném souboru (již bez dalších komentářů). V těle stránky je použit následující kód:

WriteNavigation(theMonth,theYear);
WriteMonthTable(theMonth,theYear);

Tlačítko pro zavření popup okna můžete řešit třeba takto: