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:

Datum:

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.

d	Den v měsíci 1-31
dd	Den v měsíci 01-31 (dvě místa)
m	Měsíc 1-12
mm	Měsíci 01-12 (dvě místa)
yyyy	Rok (čtyři místa)
HH	Hodina 00-23 (2 místa)
MM	Minuta 00-59 (2 místa)
SS	Sekunda 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_FORMAT	Formát, který se použije, pokud není specifikován funkcí datedit Výchozí hodnota: "yyyy-mm-dd"
datedit_DEFAULT_ENABLE_EDIT	Nastavení umožnění příme editace, pokud není specifikováno funkcí datedit (true / false) Výchozí hodnota: true
datedit_VALIDATE_OUTPUT	Kontroluj platnost formátu před odesláním formuláře (true / false) Výchozí hodnota: true
datedit_WEEK_STARTS	Den, kterým začíná týden. 0 = Neděle, 1 = Pondělí, ... Výchozí hodnota: 0
datedit_USE_ANIMATION	Animovat zobrazení (true / false) Výchozí hodnota: true
datedit_ANIMATION_STEPS	Počet kroků animace Výchozí hodnota: 8
datedit_ANIMATION_SPEED	Prodleva 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.