Přidání komponenty DateInput do Nette 2.1.dev
- James
- Člen | 54
Ahoj,
pokouším se implementovat komponentu DateInput, do Nette
(v2.1 dev). Postupoval jsem přesně podle návodu, vše je nalinkované:
(.js – jQuery, jQuery UI, Timepicker addon, dateInput)
(.css – jQuery UI, Timepicker addon, dateInput)
Registrace v bootstrap.php také.
Výsledek je ale od dema rozdílný, jak vizuálně, což by asi nebyl takový problém, ale i po funkční stránce. Mám tu drobné odlišnosti v obsluze komponenty.
Přikládám i náhled mé komponenty v porovnání s demem.
Dík za každý typ nebo radu.
- James
- Člen | 54
voda napsal(a):
Inputy v tvém náhledu jsou výchozí od browseru. Podívej se do logu v prohlížeči, předpokládám, že tam bude nějaká js chyba.
V logu se přeci jenom nějaké chyby vyskytly. Dvě byly ve špatném načítání jquery-ui-timepicker-addon skriptů css a js, to už je teď v pořádku.
V souboru dateInput.js hlásí chybu, že Nette nebylo definované.
V inicializacačním kódu kalendáře pomocí javascriptu se taky jedna vyskytla.
$('input[data-dateinput-type]').dateinput({
datetime: {
dateFormat: 'd.m.yy',
timeFormat: 'H:mm',
options: { // nastavení datepickeru pro konkrétní typ
changeYear: true
}
},
'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'
},
options: { // globální nastavení datepickeru
closeText: "Close"
}
});
});Objekt [object Object] nemá metodu dateinput s odkazem na tento řádek
$('input[data-dateinput-type]').dateinput({Je možné, že by tyto chyby měli vliv na to, jak se bude celá komponenta zobrazovat?
- Robyer
- Člen | 74
James napsal(a):
Je možné, že by tyto chyby měli vliv na to, jak se bude celá komponenta zobrazovat?
Ty chyby způsobují, že se ta JS komponenta pro volbu data vůbec nezobrazí. Takže ano. Až je potřeba vyřešit ty problémy. Buď to bude vzájemnou nekompatibilitou skriptů (např. nová/stará verze jQuery) nebo špatným pořadím načítaných skriptů (např. chceš pracovat s komponentou, ale browser její skript ještě nenačetl) nebo nějaký skript zapomínáš načítat (jquery, nette forms,..), apod.
- James
- Člen | 54
voda napsal(a):
Načítáš i
netteForms.js? Měl by být ještě před načtenímdateInput.js.
Ano, netteForms.js také načítám, akorát jsem ho původně načítal až poté, což jsem upravil a chyba z dateInput.js je již opravena. Teď už to akorát hází chybu z té inicializace, že dateinput není metoda daného objektu.
$('input[data-dateinput-type]').dateinput({
- James
- Člen | 54
Layout
{**
* My Application layout template.
*
* @param string $basePath web base path
* @param string $robots tell robots how to index the content of a page (optional)
* @param array $flashes flash messages
*}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="robots" content="{$robots}" n:ifset="$robots">
<title>{block title|striptags|upper}Nette Application Skeleton{/block}</title>
<link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/screen.css">
<link rel="stylesheet" media="print" href="{$basePath}/css/print.css">
<link rel="shortcut icon" href="{$basePath}/favicon.ico">
{* DateInput *}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="{$basePath}/js/netteForms.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type='text/javascript' src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="{$basePath}/css/jquery-ui-timepicker-addon.css">
<script type='text/javascript' src="{$basePath}/js/jquery-ui-timepicker-addon.js"></script>
<script src="{$basePath}/js/netteForms.js"></script>
<link rel="stylesheet" type="text/css" href="{$basePath}/css/dateInput.css">
<script type='text/javascript' src="{$basePath}/js/dateInput.js"></script>
{block scripts}
<script src="{$basePath}/js/jquery.js"></script>
<script src="{$basePath}/js/main.js"></script>
<script>
$(document).ready(function() {
$('input[data-dateinput-type]').dateinput({
datetime: {
dateFormat: 'd.m.yy',
timeFormat: 'H:mm',
options: { // nastavení datepickeru pro konkrétní typ
changeYear: true
}
},
'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'
},
options: { // globální nastavení datepickeru
closeText: "Close"
}
});
});
</script>
{/block}
{block head}{/block}
</head>
<body>
<script> document.documentElement.className+=' js' </script>
<div n:foreach="$flashes as $flash" class="flash {$flash->type}">{$flash->message}</div>
{include content}
</body>
</html>- James
- Člen | 54
Presenter – vytvoření komponenty DateInput
<?php
namespace App\AdminModule;
use Nette,
Model,
Nette\DateTime,
Vodacek\Forms\Controls\DateInput;
class FoodPresenter extends BasePresenter
{
public function createComponentInsertFood()
{
$form = new Nette\Application\UI\Form;
$form->addDate('date', 'Date', DateInput::TYPE_DATE)
->addRule($form::VALID);
$form->addDate('datetime', 'Datetime', DateInput::TYPE_DATETIME)
->setDefaultValue(new DateTime())
->addRule($form::RANGE, null, array(new DateTime('-1 month'), new DateTime('+1 month')));
$form->addDate('datetimeLocal', 'Local datetime', DateInput::TYPE_DATETIME_LOCAL)
->setDefaultValue(new DateTime())
->addRule($form::RANGE, null, array(new DateTime('-2 years'), new DateTime('+2 years')));
$form->addDate('month', 'Month', DateInput::TYPE_MONTH);
$form->addDate('week', 'Week', DateInput::TYPE_WEEK)
->setDefaultValue(new DateTime())
->addRule($form::RANGE, null, array(new DateTime('-1 year'), new DateTime('+6 months')));
$form->addDate('time', 'Time', DateInput::TYPE_TIME)
->setDefaultValue(new DateTime('noon'));
$form->addSubmit('send', 'Vložit');
// call method insertFoodFormSucceeded() on success
$form->onSuccess[] = $this->insertFoodFormSucceeded;
return $form;
}
}- James
- Člen | 54
voda napsal(a):
Máš tam dvakrát načítání
netteForms.jsa dvakrát jquery (jquery-1.9.0.min.jsajquery.js).
Myslím, že to byla asi hlavní závada, že jsem načítal víc skriptů a nebylo jasné který z nich platí. Už jsem to opravil a zobrazení se už shoduje s tímto, ale stále to nevypadá jako v demu komponenty, takže odhaduji, že ještě asi špatně načítám CSS nebo JS dateInput.
Editoval James (9. 12. 2013 12:50)