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

Ahoj, stejně jako u ostatních formulářových prvků:

$form->setDefaults(array(
	'date' => new \DateTime('2012-08-23 21:31:41')
));

Zdravím.
Snažím se doplněk zprovoznit v Nette 2.0.5 (čisté verzi, žédné složitosti) – https://github.com/…te-Dateinput

Ale je mi hlášen problém – Class ‚Nette\Forms\FormControl‘ not found

Rovněž nevím jak přesně udělat registraci doplňku v bootstrap.php

Koukněte do Gitu: https://github.com/…te-Dateinput

Děkuji za nakopnutí jak to zprovoznit

@**voda**:

Díky za upozornění, nahrál jsem aktuální verzi.
Ale stále nefunguje. Tedy funguje pouze prvni prvek:

$form->addDate('date', 'Date', DateInput::TYPE_DATE);

Ostatní nefunguji:

$form->addDate('datetime', 'Datetime', DateInput::TYPE_DATETIME);
$form->addDate('datetimeLocal', 'Local datetime', DateInput::TYPE_DATETIME_LOCAL);
$form->addDate('month', 'Month', DateInput::TYPE_MONTH);
$form->addDate('week', 'Week', DateInput::TYPE_WEEK);
$form->addDate('time', 'Time', DateInput::TYPE_TIME);

Je u nich zobrazen pouze klasicky input ale neni mozne vybrat datum.
Cim by to mohlo byt?
https://github.com/…te-Dateinput

@**voda**:
Tak už to funguje. Nebyl nahrán jeden JS soubor.
Díky. Máš u mne pivo

Editoval motorcb (6. 10. 2012 9:26)

Chtěl bych nahlásit další bug:

Pokud kliknu na button „Nyní“ pro nastavení aktuálního datumu a času, tak se hodnota neodešle.
Pokud ale vyberu datum a čas ručně, jak se odešle zvolená hodnota.

Viz: https://github.com/…te-Dateinput

Prosím o prověření.
Děkuji

Narazil jsem na podobné potíže jako ostatní dříve:

1. pokud jsem použil DateInput::TYPE_DATETIME tak mi nešlo posuvníky měnit hodiny a čas. Dostával jsem chybovou hlášku, že neexistuje funkce formatTime konkrétně .timepicker._formatTime(tp,‚hh:mm:ss‘,.....

To jsem vyřešil tak, že jsem v dateInput.js opravil řádek 264:

var value = $.datepicker.formatDate('yy-mm-dd', selectedDate) + 'T' + $.timepicker._formatTime(tp, 'hh:mm:ss', false);

na tento:

var value = $.datepicker.formatDate('yy-mm-dd', selectedDate) + 'T' + $.datepicker.formatTime('HH:mm:ss', tp,  false);

2. při zvolení datumu a času z datetimepickeru se do presenteru pro zpracování formuláře nepředala hodnota skrytého inputu s vybraným datumem a časem. To je dáno tím, že skrytý input neodpovídá původní definici formuláře. Prozatím jsem to vyřešil tak, že v presenteru hodnoty formuláře zpracovávám takto

$values = $form->getHttpData(TRUE);
unset($values['save']); //odstranit tlačítka z formu ať můžeme pole $values použít celé
unset($values['storno']);

Asi by to šlo i jinak, možná elegantněji/bezpečněji?

3. pokud ručně upravím hodnotu v poli (tzn. bez použití datetimepickeru) nepřenese se tato hodnota do skrytého inputu a samozřejmě se neodešle do presenteru. Takže jsem v dateInput.js změnil přiřazení metody pro zpracování zvolených hodnot z onSelect na onClose a dále jsem upravil získávání datumu a času. Nyní místo selectedDate používám t.datepicker(‚getDate‘). Zde je nová metoda:

$.extend(pickerSettings, {
onClose: function() {
var tp = {
	hour: t.datepicker('getDate').getHours(),
	minute: t.datepicker('getDate').getMinutes(),
	second: t.datepicker('getDate').getSeconds()
};
var value = $.datepicker.formatDate('yy-mm-dd', t.datepicker('getDate')) + 'T' + $.datepicker.formatTime('HH:mm:ss', tp,  false);

if (type == 'datetime') {
	value += 'Z';
	}

alt.val(value);
}
});

Původní metodu onSelect jsem zatím zrušil.

Používám jquery-ui-1.9.2.custom.min.js, poslední jquery-ui-timepicker-addon.js z GitHubu.

Snad to co jsem zjistil někomu dalšímu pomůže :-)

Dá se nějak nastavit výběr roku? Zkoušel jsem to pomocí changeYear: true, ale bez efektu.

Ahoj.
Nedari sa mi zobrazit DateTime picker.
Hlasi to JS error:
Unhandled Error: ‚obj.prop‘ is not a function
niekde v tejto casti (jquery-ui-timepicker-addon aktualna verzia z Gitu):

<script>
return obj.prop('slide', null).slider({
						orientation: "horizontal",
						value: rtl? val*-1 : val,
						min: rtl? max*-1 : min,
						max: rtl? min*-1 : max,
						step: step,
						slide: function(event, ui) {
							tp_inst.control.value(tp_inst, $(this), unit, rtl? ui.value*-1:ui.value);
							tp_inst._onTimeChange();
						},
						stop: function(event, ui) {
							tp_inst._onSelectHandler();
						}
					});
</script>

Dalej pouzivam:
jquery-ui-1.8.9.custom.min (aj slider aj datepicker)
jquery-1.5.min
a dateInput pre nette 0.9.x

Poradie nacitania js je podla postu vyssie.
Dakujem za odpoved.

Caute, neviete niekto v com mam problem, mam formular, a ked nastavim datum a dam odoslat a nasledne v inpute ten datum vymazem a dam zase odoslat, tak mi v tom inpute ten datum znovu zobrazi, aj ked si dumpnem values v metode ktora spracuje formular, tak miesto NULL tam mam ten datum. Nevie niekto v com je problem? mam nette 2.1 dev, pokial pouzijem input text tak je to ok, robi mi to len na dateInput.

	protected function createComponentForm()
	{
		$form = new Form();

		$form->addDate('date_from', 'Dátum od', DateInput::TYPE_DATE)
			->setAttribute("placeholder", "Dátum od");

		$form->addText('id', 'Id');

		$form->addSubmit('filter', 'Filter');

		$form->onSuccess[] = callback($this, 'filterSubmitted');

		return $form;
	}

	public function filterSubmitted(Form $form)
	{
		$values = $form->getValues();

	}

duskohu napsal(a):

Caute, neviete niekto v com mam problem, mam formular, a ked nastavim datum a dam odoslat a nasledne v inpute ten datum vymazem a dam zase odoslat, tak mi v tom inpute ten datum znovu zobrazi, aj ked si dumpnem values v metode ktora spracuje formular, tak miesto NULL tam mam ten datum. Nevie niekto v com je problem? mam nette 2.1 dev, pokial pouzijem input text tak je to ok, robi mi to len na dateInput.

Ahoj, teď jsem zkoušel verzi Nette 2.0 i 2.1 a v obou mi to funguje v pořádku. Jakou máš verzi jquery a jquery-ui? Nehlásí to nějakou javascriptovou chybu?

Prave som narazil este na jeden problem. Ked mas na stranke formular s dateInputom, a prebehne payload,
tak sa tento input zdupluje, ked je 1 urobi 2 ..4 ..

To záleží na tom, jak máš nastavenou inicializaci. Vydal jsem verzi 1.0.1, kde je toto ošetřené.

ešte mám takú vec, je možné dostať addCondition a addConditionOn to nového dátumu? Ide o to, že dátum nemusí byť vyplnený a keď je vyplnený, aby mal nejaké addRule. Pretože ak nie je vyplnený a nie je required, formulár nie je validný.

Ďakujem

Ahoj,

xxxmisko napsal(a):

Vedeli by ste mi poradiť, ako spraviť takú vec, napríklad checkin a checkout? Teda, že v prvom Date vyplním nejaký dátum a čas a v druhom bude defaultne zadaný ten istý dátum a čas bude napríklad +1hodina?

Řeší se to stejně jako v samostatném datepickeru:

$('#frmtestForm-from').datepicker('option', 'onSelect', function(val, inst) {
	var date = $('#frmtestForm-from').datepicker("getDate");
	date.setDate(date.getDate() + 2);
	$('#frmtestForm-to').datepicker( "setDate", date);
});

ešte mám takú vec, je možné dostať addCondition a addConditionOn to nového dátumu? Ide o to, že dátum nemusí byť vyplnený a keď je vyplnený, aby mal nejaké addRule. Pretože ak nie je vyplnený a nie je required, formulár nie je validný.

Jednoduše asi ne, protože doplněk pracuje s DateTime objekty, s kterými formulářová validace moc nefunguje. Nejlépe ukaž konkrétní kód co potřebuješ a já se na to podívám.

Skúsim ďalšiu otázku. Nastavím addRule a Form::RANGE. Ako typ používam DateInput::TYPE_DATE. Ak dám range array(new Date(), new Date(‚+2 year‘)), vyberiem dnešný dátum, tak neprejde validáciou. Je to zrejme bug v doplnku.

Díky za bugreport, je to opraveno na master větvi.

Nemá niekto potuchy čo sa mi tam rozbilo? Nic som neupgradoval, doteraz to šlo bez problému. Celkom ten exception nechápem.
Magic method App\AdminModule\Components\BaseUIForm::addDate() has not corresponding property $dates

nette 2.1 dev

edit: tak už som na to prišiel, dal som si do base formu @method anotacie pred triedu aby som mal nápovedu, vôbec nechápem čo sa pokúšal framework spraviť len na základe tých anotácií. Takže už mi to funguje len nemám nápovedu :(

edit2: takže ObjectMixin na základe anotácie @method addDate hľadá property $dates do ktorej chce vložiť parameter volanej metódy addDate. Kontrola existencie extension metod je až za kontrolou existencie anotácií @methods, takže si nemôžem oanotovať addNiečo metódy pridané cez extension method.

Editoval vvoody (23. 8. 2013 13:06)

Zdravím,
pokud použiji Nette 2.1dev s validací Form::RANGE, Nette se pokouší volat Nette\Forms\Validator::validatedateInputRange() namísto DateInput::validatedateInputRange().

Použití:

$this->addDate('myDate', "Date", DateInput::TYPE_DATETIME)
     ->addRule(self::RANGE, '%label must be in future.', array(new DateTime(), NULL));

Bylo by možné přidat podporu pro tuto validaci i pro Nette 2.1dev? Hádám, že za to může tento commit.

Jako workaround lze použít tradiční callback + nastavit min a max:

$now = new DateTime();
$this->addDate('myDate', "Date", DateInput::TYPE_DATETIME)
     ->addRule("\Vodacek\Forms\Controls\DateInput::validateDateInputRange", '%label must be in future.', array($now, NULL));
     ->getControlPrototype()->min($now->format("Y-m-d\TH:i:se"));

Editoval Casper (24. 8. 2013 17:19)

Ahoj, v ukázce na jsfiddle je pro input nastavená nějaká nesmyslná hodnota. Přímo takhle do vygenerovalo php? Zkoušel jsem to v FF24.2 a když nesmyslnou hodnotu opravím nebo odmažu, tak se to začne chovat správně.

@Voda: ta hodnota se nastaví při

<?php
new DateTime('0000-00-00 00:00:00.000000');
?>

A tu hodnotu jsem měl v DB. Ale podle mě by to přesto nemělo mít takové chování. Asi špatná reakce při nepodařeném rozparsování data?

michal.lohnisky napsal(a):

@Voda: ta hodnota se nastaví při

<?php
new DateTime('0000-00-00 00:00:00.000000');
?>

Ahoj, hodnota 0000-00-00 00:00:00 není platné datum. Pokud chceš mít datum nevyplněné, měl bys mít v db null.

@voda: OK díky, potvrdil jsi mou domněnku, že bude potřeba upravit DataGrid, ale tak silnej, abych si dokázal upravit to zpracování v Datagridu asi nejsem. Zkusím něco „vysedět“

@voda: ale neřeší to další průběh, protože DataGrid.php:251 pak opět plní filtrační formulář

<?php
$this['form']['filter']->setDefaults($this->filter);
?>

a to už $this->filter neobsahuje objekt DateTime, ale jen array a to se pochopitelně DateInput.php:110 nelíbí – Invalid type for $value

edit: array_filter() tedy asi nezachová objekt

Editoval Honza_S (5. 2. 2014 19:27)

@voda: ne úpravu jsem smáznul a nahradil funkcí z pull reqestu.
Nenapadá mne nic jiného, než že se to ztrácí ve funkci array_filter() ← edit: blbost!
Laděnka hlásí na DataGrid.php:251 toto pole:

<?php
array (1) ▼
	datum_zalozeni => array (3) ▼
		date => "2014-01-25 00:00:00" (19)
		timezone_type => "3"
		timezone => "Europe/Prague" (13)
?>

Editoval Honza_S (5. 2. 2014 20:17)

Ahoj,
prosím věděli byste mi poradit.
Zkouším tuto skvělou komponentu. Vše maká super.
Ale trápím se při vykonání ajaxu.

Presenter

<?php
	...
	$form->addDate('zalozeno', 'Založeno', DateInput::TYPE_DATETIME)
		->setDefaultValue($now);
?>

V šabloně nadefinován přes js formát datumu.

Pokud se zobrazí formulář, u prvku „zalozeno“ se objeví aktuální datum: 16.4.2014 12:56
kliknu-li zobrazí se DataTimePicker.
Super.

Bohužel když vyberu ze SelectBoxu (DependentSelectBox), ale po provední invalidateControl snippetu (celý form) se mi hodnota datumu změní na: 2014–04–16T12:56:00Z

Nevíte jak zamezit změně formátu datumu při ajaxu?

Moc díky

voda napsal(a):

Po načtení dat ajaxem musíš znovu spustit js ($('input[data-dateinput-type]').dateinput({...});).

super, díky
potřeboval jsem nakopnout.

Ještě jednou díky

Změn si to use na:

use Vodacek\Forms\Controls\DateInput;

Ještě počeštění kalendáříku – do javascriptu doplnit:

options: { // global options
    closeText: "Zavřít",
    currentText:"Aktuální",
    prevText: 'Předchozí',
    nextText: 'Další',
    monthNames: ['Leden','Únor','Březen','Duben','Květen','Červen', 'Červenec','Srpen','Září','Říjen','Listopad','Prosinec'],
    monthNamesShort: ['Le','Ún','Bř','Du','Kv','Čn', 'Čc','Sr','Zá','Ří','Li','Pr'],
    dayNames: ['Neděle','Pondělí','Úterý','Středa','Čtvrtek','Pátek','Sobota'],
    dayNamesShort: ['Ne','Po','Út','St','Čt','Pá','So',],
    dayNamesMin: ['Ne','Po','Út','St','Čt','Pá','So']
}

S verzemi, které jsi uvedl mi to funguje. Nehlásí prohlížeč nějaké chyby do konzole?