Jednoduché zadávání datumu ve formuláři

30. května 2001

•

Jednoduché a praktické zadávání datumu bývá v mnoha formulářích kamenem úrazu: pokud necháte uživatele zadat datum do editačního pole, musíte správnost zadání složitě kontrolovat a ve zpracovávacích serverových skriptech převádět na vhodný formát. Ideálním řešením bývají formulářová pole SELECT – vypsat v HTML pole SELECT pro výběr dne v rozsahu 1 až 31 je ale zbytečně zdlouhavé. Zde vám ukážeme sadu jednoduchých skriptů, které vám ušetří práci a – a to především – provedou výchozí nastavení SELECT polí na aktuální datum.

Nejprve malá ukázka: druhý řádek následujícího formuláře, umožňující zadat období,je vytvořen pomocí JavaScriptu. Období je automaticky nastaveno na dobu jednoho týdne, počínaje dnešním datem:

Formulář na předchozím řádku je vcelku jednoduchý, uveďme si jen, že se jmenuje netradičně main (toto jméno využijeme při pozdější adresaci). Dále je ve formuláři obsažena dvouřádková tabulka; první řádek obsahuje nadpis, ve druhém je následující JavaScript, který především volá funkce pro vytváření jednotlivých SELECT polí:

document.write( "Od: " )
CreateDayCombo( "main", "d_od", 0 )
document.write( "." )
CreateMonthCombo( "main", "m_od", 0 )
document.write( "." )
CreateYearCombo( "main", "y_od", 0 )
document.write( " Do: " )
CreateDayCombo( "main", "d_do", 6 )
document.write( "." )
CreateMonthCombo( "main", "m_do", 6 )
document.write( "." )
CreateYearCombo( "main", "y_do", 6 )

Použity jsou tři funkce, každá z nich vytváří SELECT pole pro určitý typ údaje, tedy pro den, měsíc a rok. Protože parametry všech tří funkcí jsou totožné, popíšeme si nejprve je:

formname – první parametr udává název formuláře, v němž je SELECT pole umístěno, v našem případě tedy „main“.
fieldname – druhým parametrem je jméno formulářového pole, jež se má vytvořit
daysfrom – třetí parametr určuje počet dní, které se přičtou k aktuálnímu datu. Tímto přičtením je získáno datum, které je pak vybráno jako aktuální v příslušném políčku (použito v druhé části volajícího skriptu pro vytvoření týdenního období).

Kód všech tří funkcí neobsahuje žádné záludnosti, uvedeme si jej proto postupně jen s minimálními komentáři.

Nejprve nejjednodušší funkce CreateDayCombo:

function CreateDayCombo( formname, fieldname, daysfrom ) {
    document.write( ‚<select name="‘ + fieldname + ‚" size="1">‘ )
    for( var i=1; i<=31 ; i++ ) {
        document.write ( ‚<option value="‘ + i + ‚">‘ + i + ‚</option>‘ )
    }
    document.write( ‚</select>‘ )
    StartDate = new Date();
    StartDate.setTime( StartDate.getTime() + daysfrom * 86400000 )
    ff = eval( "document." + formname + "." + fieldname )
    ff.selectedIndex = StartDate.getDate() – 1
}

Funkce CreateMonthCombo využívá pole s předdefinovanými názvy měsíců, které můžeme pochopitelně přizpůsobit našim potřebám, eventuelně jazykovým variantám stránek:

function CreateMonthCombo( formname, fieldname, daysfrom ) {
var months = new Array( "ledna","února","března",
            "dubna","května","června",
            "července","srpna","září",
            "října","listopadu","prosince")
    document.write( ‚<select name="‘ + fieldname + ‚" size="1">‘ )
    for( var i=1; i<=12 ; i++ ) {
        document.write ( ‚<option value="‘ + i + ‚">‘ + months[i-1] + ‚</option>‘ )
    }
    document.write( ‚</select>‘ )
    StartDate = new Date();
    StartDate.setTime( StartDate.getTime() + daysfrom * 86400000 )
    ff = eval( "document." + formname + "." + fieldname )
    ff.selectedIndex = StartDate.getMonth()
}

Poslední funkce CreateYearCombo obsahuje navíc test na datum vrácené metodou getYear – je to z toho důvodu, že některé verze NN vracejí např pro rok 2001 hodnotu 101 atp. Změnou konstant firstyear a lastyear můžeme změnit rozsah let, jež lze zadat ve vytvářeném SELECT boxu:

function CreateYearCombo( formname, fieldname, daysfrom ) {
    firstyear = 1995
    lastyear = 2005
    document.write( ‚<select name="‘ + fieldname + ‚" size="1">‘ )
    for( var i=firstyear; i<=lastyear ; i++ ) {
        document.write ( ‚<option value="‘ + i + ‚">‘ + i + ‚</option>‘ )
    }
    document.write( ‚</select>‘ )
    StartDate = new Date();
    StartDate.setTime( StartDate.getTime() + daysfrom * 86400000 )
    year = StartDate.getYear()
    year = year < 999 ? year + 1900 : year
    ff = eval( "document." + formname + "." + fieldname )
    ff.selectedIndex = year – firstyear
}

A to je k dnešnímu tématu vše. Věřím, že vám popisované funkce ušetří trochu práce při vytváření HTML formulářů. Samozřejmě, sloučení výše popsaných funkcí do jedné pro snadnější volání jest možné.

Přeji vám příjemný den.