Datedit - Javascript Date picker
by Ivo Skalicky - ITPro CZ (http://www.itpro.cz)

Datedit je snadno implementovatelná javascriptová komponenta pro volbu data pomocí kalendáře. Datedit si zakládá na velmi snadné implementaci pro programátora. Stačí přidat několik řádků a vaše editační políčka se mohou okamžitě proměnit úhledný kalendář.

Stažení

http://itpro.cz/datedit/datedit.zip

Přečtěte si také licenční podmínky

Implementace do stránky

  1. Vložte stylový soubor CSS do hlavičky stránky.

    <link rel="stylesheet" href="datedit/datedit.css" type="text/css" media="screen" />
  2. Políčka formulářů, pro která si přejete použít Datedit označte atributem id

    Příklad:
    <input type="text" id="datum_zacatek" /> <input type="text" id="datum_konec" />
  3. Na libovolné místo ve stránce (do hlavičky nebo do těla) vložte:

    <script type="text/javascript" charset="iso-8859-1" src="datedit/datedit.js"></script>
    Poznámka: Je nutné zachovat nastavení charset="iso-8859-1" pro tento skript.
  4. Za přechozí vložte kód pro načtení jazykového souboru, pokud tento řádek vynecháte, bude kalendář zobrazován v angličtině:

    <script type="text/javascript" charset="utf-8" src="datedit/lang/cz.js"></script>
    Poznámka: Nastavení charset tohoto skriptu musí odpovídat kódování jazykového souboru. Není třeba ho uvádět, pokud celá vaše stránka má shodné kódování s kódováním jazykového souboru.
  5. Zvolte, která políčka a s jakým formátem mají používat Datedit.

    Příklad:
    <script type="text/javascript">
      datedit("datum_zacatek","d.m.yyyy");
      datedit("datum_konec");
    </script>

Ukázka implementace

Kód:

<form method="post" action="#">
  <fieldset>
    <label for="datum">Datum:</label> <input type="text" name="datum" id="datum" />
  </fieldset>
</form>

<!-- Datedit by Ivo Skalicky - ITPro CZ - http://www.itpro.cz -->
<script type="text/javascript" charset="iso-8859-1" src="datedit/datedit.js"></script>
<script type="text/javascript" charset="utf-8" src="datedit/lang/cz.js"></script>
<script type="text/javascript">
  datedit("datum","d.m.yyyy HH:MM");
</script>

Výsledek:

Rozsáhlejší demonstraci si prohlédněte v souboru demo.html

Formát data a času

Formát s jakým má editační políčko pracovat se udává jako druhý parametr inicializační funkce datedit. Tento parametr je nepovinný a pokud není uveden, použije se výchozí formátovací řetězec.

dDen v měsíci 1-31
ddDen v měsíci 01-31 (dvě místa)
mMěsíc 1-12
mmMěsíci 01-12 (dvě místa)
yyyyRok (čtyři místa)
HHHodina 00-23 (2 místa)
MMMinuta 00-59 (2 místa)
SSSekunda 00-59 (2 místa)

Funkce datedit má i třetí volitelný parametr. Ten určuje, zda má být uživateli povoleno editovat datum přímo v editačním políčku. Pokud je hodnota false je editace zakázána.

Pokud použijete i 4 parametr, je možné toto políčko použít pro spolupráci s PHP/SQL. Např. do vygenerované stránky vložíte datum normálně tak, jak Vám ho vrátil SQL skript, tedy zapíšete např. hodnotu value="1985-03-25 10:45:00", ale chcete aby datum bylo zobrazeno jako 25.3.1985 a v tomto formátu si ho mohl uživatel i editovat. Jako čtvrtý parametr tedy zadáte vstupně-výstupní formát (v tomto případě tedy yyyy-mm-dd HH:MM:SS). Datedit po načtení stránky překonvertuje datum ze vstupního do uživatelského formátu a při odeslání formuláře provede stejnou konverzi v opačném směru.

Nastavení

Řadu možností komponenty datedit můžete ovlivnit konfiguračními proměnnými.

datedit_DEFAULT_FORMATFormát, který se použije, pokud není specifikován funkcí datedit
Výchozí hodnota: "yyyy-mm-dd"
datedit_DEFAULT_ENABLE_EDITNastavení umožnění příme editace, pokud není specifikováno funkcí datedit (true / false)
Výchozí hodnota: true
datedit_VALIDATE_OUTPUTKontroluj platnost formátu před odesláním formuláře (true / false)
Výchozí hodnota: true
datedit_WEEK_STARTSDen, kterým začíná týden. 0 = Neděle, 1 = Pondělí, ...
Výchozí hodnota: 0
datedit_USE_ANIMATIONAnimovat zobrazení (true / false)
Výchozí hodnota: true
datedit_ANIMATION_STEPSPočet kroků animace
Výchozí hodnota: 8
datedit_ANIMATION_SPEEDProdleva mezi animačními kroky v milisekundách
Výchozí hodnota: 40

Licence

Licensed under the Creative Commons Attribution 3.0 License - http://creativecommons.org/licenses/by/3.0/

Nad řádkem, kterým vkládáte script datedit.js, MUSÍ být bych byl rád, kdyby byl uveden komentář:
<!-- Datedit by Ivo Skalicky - ITPro CZ - http://www.itpro.cz -->

Pokud se Vám skript líbí, budeme rádi za odkaz na itpro.cz/datedit/.

Zdrojový kód skriptu

Na základě četných emailů zde uveřejňuji odkaz na javascript v otevřené podobě: datedit_src.js.