[addon DateInput] DateInput – html 5 kompatibilní formulářové prvky pro výběr data

Pokud se nic nezměnilo a mé poslední testy jsou správné, tak používání validateValid vede k zacyklení v prohlížeči. Viditelně se to projevuje především v IE.

Potvrzuji chybu, bohužel nejsem zběhlý v JS ani debugování JS, takže nic moc konstruktivního nepřinesu. Použil jsem nejnovější netteForms.js a dateInput.js z githubu. Chyba se mi projevuje i ve Firefoxu (při zapnutém FireBugu se zacyklí, bez něj zruší js validaci všech inputů definovaných až po daném Date s Form::VALID)

Používám tyto verze:

Firefox 6.0
Firebug 1.8.1
jQuery 1.6.1
jQuery UI 1.8.14
jQuery timepicker addon 0.9.6

Tak jediné co jsem zjistil, tak se to pořád cyklí ve funkcích:
validateControl > validateRule > valid > validateControl > atd.. ale moc jsem z toho nevykoumal, v čem je problém… výpis zásobníku, začátek cyklení:

... atd
anonymous()netteForms.js (řádek 167)
anonymous()netteForms.js (řádek 157)
anonymous()netteForms.js (řádek 72)
anonymous()netteForms.js (řádek 167)
anonymous()netteForms.js (řádek 157)
anonymous()netteForms.js (řádek 72)
anonymous()netteForms.js (řádek 105)
anonymous()netteForms.js (řádek 294)
anonymous()netteForms.js (řádek 16)

Aha, na tohle vlákno jsem nenarazil, díky

Ještě k tvému příspěvku z komentářů pod doplňkem

Jen snad: řádek 202 v dateInput.js … atribut id nastavený na null mi dělal ve Firefoxu (5.0) problémy (pod celou stránkou pod skončením html nechával prázdné místo o výšce cca 250px, kliknutím do inputu zmizelo).

Nahradil jsem to za removeAttr, nevím jestli v tom bude nějaký rozdíl, ale uvítal bych, kdybys to mohl otestovat.

Casper napsal(a):
dostávám expcetion (při strictMode na řádku parent::getControl())

můžeš mi prosím někam nahrát laděnku, podívám se na to.

špatně pojmenované metody (např. validateDateInputRange → validatedateRange)

díky, fixnuto. Měl jsem špatně pojmenované pravidla v addRule.

$control->value (ve funkci validatedateRange) je NULL pro TYPE_DATETIME i TYPE_DATETIME_LOCAL (pravděpodobně jde o chybné formáty,…

opravdu se jednalo o špatný formát, datetime má oproti datetime-local navíc časovou zónu, v javascriptu jsme to měl obráceně.

Díky za hlášení chyb, zkus prosím novou verzi (0bf5df1).

Jak máš zapsáno pravidlo Form::VALID, nechybí ti tam druhý parametr $message?

ostatní typy dokonce ignorují vložení value do inputu při kliknutí (chyba JS)

teď mi to taky nějak nechce fungovat, s každou verzí jquery, … se to může chovat jinak. Zkusím se na to podívat.

zadám datum na „zítra“ s časem menším než nyní a pak zpět kliknu na dnešek, datepicker pořeší nastavení hodnoty na minimální povolený čas (tedy nyní), ale do pomocného inputu se vloží čas, který jsem nastavil pro zítřek

Tohle snad řeší timepicker addon, zkus nejnovější dev verzi

problém s now je akorát ten, že při odeslání je „now“ větší o dobu vyplňování formuláře než „now“ z prvního zobrazení. Datum nastavené u uživatele na tohle vliv mít nebude. Jeho datum se akorát použije na nastavení výchozího data.

Casper napsal(a):
Aha díky, zapomněl jsem, každopádně neměla by být nějaká implicitní?

Dobrá připomínka, doplním.

Žádnou dev verzi jsem (na githubu) nenašel.

Je tam dev větev, kde probíhá vývoj, ale teď koukám, že je v podstatě stejná jako master větev.

DateInput jsem vyzkoušel, bohužel nevím, zda je to má chyba, nebo bug, ale když pak mám formulář ve kterém datum edituji, tak pokud jej nezměním a nechám tak jak se načte a pouze uložím, tak se uloží nulové datum.
Pak mám ještě problém s tím, že mi funguje pouze DateTime a nikoliv Date, kalendář se sice zobrazí, ale po kliku na nějaký den zůstane input prázdný.

Díky za novou verzi, nyní mi jede i typ DATE, ovšem při použití typu DATETIME mi to sice funguje správně, ovšem když pak otevřu editační formulář, kdy již je pole vyplněné a formulář pak pouze uložím, tak se nastaví minimální možné datum, přičemž, když datum před uložením edituji, tak se uloží správně.
Tak nevím zda někde dělám chybu, případně zda se pole s dateinputem při načtení defaultní hodnoty nějak nenačte. Za případnou radu dík …

voda napsal(a):

@jeremy13: můžeš to ukázat na konkrétním příkladu, protože buď zkouším něco jiného, nebo je chyba někde jinde.

Tak formulář vytvářím v komponentě a myslím, že nedělám nic zvláštního, konkrétně input datumu přidám následovně:

$form->addDate('start', 'Začátek', DateInput::TYPE_DATETIME);

do šablony pak includuju následující javascript:

$(function() {

$.timepicker.regional['cs'] = {
    timeOnlyTitle: 'Vyberte čas',
    timeText: 'Čas',
    hourText: 'Hodiny',
    minuteText: 'Minuty',
    secondText: 'Vteřiny',
    currentText: 'Nyní',
    closeText: 'Zavřít',
    timeFormat: 'h:m',
    ampm: false
};
$.timepicker.setDefaults($.timepicker.regional['cs']);


$('input[data-dateinput-type]').dateinput({
          datetime: {
        dateFormat: 'd.m.yy',
        timeFormat: 'h:mm'
    },
    'datetime-local': {
        dateFormat: 'd.m.yy',
        timeFormat: 'h:mm'
    },
    date: {
        dateFormat: 'd.m.yy'
    },
    month: {
        dateFormat: 'MM yy'
    },
    week: {
        dateFormat: "w. 'týden' yy"
    },
    time: {
        timeFormat: 'h:mm'
    }

});

});

DateInput používám aktuální (jak php, tak js).
Jak říkám, když dateinput použiji, tak se vše správně uloží. Když ovšem načtu editační formulář, kde se dá pole DateInputem upravit, tak pokud ho neupravím, tak přestože ukazuje správné datum (a i to hidden pole, které dateinput používá ukazuje správné datum), tak se odešle datum nulové (0000–00–00 00:00:00).

Chybu s nulovým datem se mi také nepovedlo dostat / najít.

Každopádně chyba, kterou jsem popisoval v posledním příspěvku přetrvává, zkoušel jsi jí opravit nebo to není tak jednoduché?

Také bych opravdu změnil tu nerovnost u validace RANGE, například když dám:

$form->addDate('datum', 'Datum', DateInput::TYPE_DATE)
     ->addRule(Form::RANGE, 'From today to infinity...', array(new \DateTime('today'), NULL));

…tak mě validační script nepustí, protože chce datum > today (tedy zítřek). A to mi moc smysl nedává, aneb jak už jsem psal: dává mi větší smysl mít v min minimální povolenou hodnotu.

voda napsal(a):
Nicméně jakej smysl má zadávat výchozí datum mimo povolený rozsah hodnot?

Poměrně velkej, zadáš do formuláře třeba ten dnešek, uloží se ti do db a zítra to budeš chtít upravit, jenže RANGE je dynamický vzhledem k času, takže v db už máš včerejší datum (které už je neplatné), pokud pak použiješ setDeafults s daty z db, máš jako výchozí datum neplatné pro daný rozsah.

Editoval Casper (6. 11. 2011 13:22)

voda napsal(a):

Řekl bych, že dělám to samé co ty, ale 0000–00–00 00:00:00 jsme nikdy nedostal. To nulové datum se odešle už z prohlížeče? Nemáš někde živou ukázku?

Tak našel jsem co asi způsobuje problém, ale nevím jak nejlépe to opravit. Když totiž nastavím pomocí DateInputu pole typu datetime, tak se hidden pole nastaví následovně:

<input type="hidden" data-dateinput-type="datetime" name="end" value="2012-01-05T00:00:00Z">

Ovšem pokud se to pole pouze v editačním formuláři načte bez zásahu uživatele, tak se nastaví následovně:

<input type="hidden" data-dateinput-type="datetime" name="end" value="2012-01-05 00:00:00">

Tedy v případě, kdy uživatel pole nezmění, tak tam chybí znaky ‚T‘ a ‚Z‘. Pokud hidden pole manuálně před uložením změním, tak aby tam tyto znaky nechyběly, tak je vše ok.

Je prosím jasné s jakou „nejnovější“ verzí jquery, jquery-ui-timepicker-addon (popř. zda je jiný dateInput.js) to funguje? Nedaří se mi to rozchodit? Žádné chyby to nehlásí – datetimer se při kliknutí do pole neobjeví – vše mám dle návodu. Používám Nette 2.0 beta.

Je potřeba jquery-ui-xxx.custom.js?

Editoval mr.mac (1. 12. 2011 17:24)

Používám: jquery 1.7.1 (min), jquery-ui-timepicker-addon 0.9.7 (0.9.8-dev jsem nenašel), dateInput.js snad to poslední (v kódu není číslo verze), jquery-ui-1.8.16.custom.min.
Browsery Chrome 15, Firefox 8, Explorer 9.
Pro jistotu uvádím detaily implementace. Díky za radu.

@layout:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="en" />
        <meta name="description" content="Test" />
        <meta n:ifset="$robots" name="robots" content="{$robots}">
        <link rel="shortcut icon" href="{$basePath}/images/favicon.ico" />
        <link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/screen.css" type="text/css">
        <link rel="stylesheet" media="print" href="{$basePath}/css/print.css" type="text/css">
        <link rel="stylesheet" type="text/css" media="screen" href="{$basePath}/css/site.css" />
        <script type="text/javascript" src="{$basePath}/js/jquery.min.js"></script>
        <script type="text/javascript" src="{$basePath}/js/netteForms.js"></script>
        {ifset $is_addon}{include #addon}{/ifset}
</head>
...

Šablona:

{block #addon}
        <script type='text/javascript' src="{$basePath}/js/jquery-ui-timepicker-addon.js"></script>
        <script type='text/javascript' src="{$basePath}/js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type='text/javascript' src="{$basePath}/js/dateInput.js"></script>
        <link rel="stylesheet" type="text/css" href="{$basePath}/css/jquery-ui-timepicker-addon.css">
        <link rel="stylesheet" type="text/css" href="{$basePath}/css/dateInput.css"></link>
        <script type="text/javascript">

        $(function() {
                $.timepicker.regional['cs'] = {
                        timeOnlyTitle: 'Vyberte čas',
                        timeText: 'Čas',
                        hourText: 'Hodiny',
                        minuteText: 'Minuty',
                        secondText: 'Vteřiny',
                        currentText: 'Nyní',
                        closeText: 'Zavřít',
                        timeFormat: 'h:m',
                        ampm: false
                };
                $.timepicker.setDefaults($.timepicker.regional['cs']);

                $('input[data-dateinput-type]').dateinput({
                        datetime: {
                                dateFormat: 'd.m.yy',
                                timeFormat: 'h:mm'
                        },
                        'datetime-local': {
                                dateFormat: 'd.m.yy',
                                timeFormat: 'h:mm'
                        },
                        date: {
                                dateFormat: 'd.m.yy'
                        },
                        month: {
                                dateFormat: 'MM yy'
                        },
                        week: {
                                dateFormat: "w. 'týden' yy"
                        },
                        time: {
                                timeFormat: 'h:mm'
                        }
                });


        });

        </script>

{/block}
...

Bootstrap.php:

...
//DateInput register
Vodacek\Forms\Controls\DateInput::register();
// Run the application!
$application->run();
...

Továrna v prezenteru:

use Nette\Application\UI\Form,
        Nette\Application as NA,
        Vodacek\Forms\Controls\DateInput;

class NabidkaPresenter extends ObchodPresenter
{
        protected function createComponentItemForm()
        {
                $form = new Form;
                $form->addDate('datumod', 'Datum přijetí:', DateInput::TYPE_DATE)
                                ->setRequired('Uveďte datum přijetí.');
                $form->addDate('datumdo', 'Požadované datum:', DateInput::TYPE_DATE);
                $form->addSubmit('save', 'Uložit')->setAttribute('class', 'default');
                $form->addSubmit('cancel', 'Storno')->setValidationScope(NULL);
                $form->onSuccess[] = callback($this, 'itemFormSubmitted');

                $form->addProtection(self::MESS_PROTECT);
                return $form;
        }
...

Pomohlo – díky moc, ještě se musím hodně učit.

EDIT: Doufám, že můj předchozí příspěvek by mohl posloužit jako „pomůcka“ pro tápající, jako jsem byl včera já.
Zatím tam mám stále timepicker-addon ve verzi 0.9.7.

Editoval mr.mac (2. 12. 2011 13:07)

Zdravím,

chtěl jsem použít tento doplněk v aktuální sestavě:

• jquery 1.7.1
• jquery ui 1.8.17
• timepicker 0.9.9

DateInput::TYPE_DATE funguje bez problémů, jakmile použiji DateInput::TYPE_DATETIME, box se nezobrazí. Nemá s tím někdo nějaké zkušenosti? Děkuji

Píše to následující chybu:
jquery-ui-timepicker-addon.js:463 Uncaught TypeError: Object [object Object] has no method 'slider'

Ahoj, rád bych použil tento doplněk, bohužel se mi to nedaří rozchodit. Firebug píše chybu v JS „Nette is not defined“ na řádku „Nette.validators …“

Používám nejnovější Nette 2.0.1, jquery.nette.js a ajax.forms.js a tyto verze

• jquery 1.7.1
• jquery ui 1.8.18
• timepicker 0.9.9

Skripty jsou načítány ve správném pořadí.
Někdo podobný problém? Díky

Nenačítal jsem … to jsem nějak přehlídl. Každopádně stále nefunguje. Chyba se změnila na „Nette.validators is undefined“.

Zdravím, podařilo se ti něco vykoumat? Díkes :)

Super, šlape jako hodinky. Díky za pomoc!

Při stisku tlačítka nyní nefunguje změna času ale pouze data. Zůstane buď předchozí hodnota(pokud nějaké byla), nebo se nastaví 00:00:00. Nefunguje to ani v ukázce, která je na stránce addonu.