DatePicker

sin

Ahoj,
chtel jsem si pridat date picker, ale mam problem s tim ze se mi trida input nastavi na

class="datepicker hasDatepicker"

Nevite nekdo proc se to dela?
Dik

iguana007

asi proto, ze jQuery nasledne podle teto class identifikuje input na ktery ma UI Calendar aplikovat? :)

igi

sin

Ale v demu to takle neni… tak se to udela bez toho…

sin

v presenteru mam

<?php
$form->addDatePicker('datum', 'Datum:', 10);
?>

a vyrenderuje se to jako

<input type="text" value="" id="frmaddForm-datum" name="datum" class="datepicker hasDatepicker" size="10">

redhead

Ale, ale, v demu to tak je:

http://romansklenar.cz/…/datepicker/

jQuery musí podle něčeho poznat na jaký prvek to má nastavit..

V čem je vlastně problém??

sin

redhead napsal(a):

Ale, ale, v demu to tak je:

http://romansklenar.cz/…/datepicker/

jQuery musí podle něčeho poznat na jaký prvek to má nastavit..

V čem je vlastně problém??

Nezobrazi se mi kalendar… Jedine co me napada je ze nevim jak je propojene zobrazeni kalendare s formularovym polickem… Ale to jsem si myslel ze udela trida DatePicker

redhead

No potřebuješ k tomu jQuery a komponentu na zobrazení DatePickeru, podívej se do toho souboru datepicker.test.phtml (nebo jak se to jmenuje), v hlavičce inkcluduje asi 4 JS soubory, ty budeš potřebovat, stejně jako inicializaci v <script> tagu pod tím. A pak ještě CSS..

sin

muj head

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="cs" />

    <title>TITLE</title>
    <script type="text/javascript" src="{$baseUri}js/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="{$baseUri}js/jquery.nette.js"></script>
    <script type="text/javascript" src="{$baseUri}js/jquery.ajaxform.js"></script>


    {* TinyMce *}
    <script type="text/javascript" src="{$baseUri}js/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" src="{$baseUri}js/tiny_mce/tiny_mce_init.js"></script>


    {* DatePicker *}
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>

	<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/latest/ui/i18n/ui.datepicker-cs.js"></script>

	<script type="text/javascript">
	$(document).ready(function(){
		$('input.datepicker').datepicker({ duration: 'fast' });
	});
	</script>

    <link rel="stylesheet" type="text/css" media="screen" href="{$baseUri}css/site.css" />
</head>

iguana007

nahrej to nekam na web tu stranku at se na to podivame, takhle se to blbe zjistuje v cem by mohl byt problem …

Honza Kuchař

Tady jsem datepicker pokud vím taky použil. (ale na úvodní stránce použit není, ale skripty načtené jsou)
http://vyvoj.abcorrect.cz/document_root/

iguana007

tak jsem dnes narazil na uplne stejny problem :) vse jsem mel udelane dle specifikace, ale kalendar porad nikde … pak jsem si vsimnul, ze mi poskakuje scrollbar po kliku na input, kde by mel byt kalendar … pak jsem zjistil, ze i ve firebugu se mi kalendar zobrazi, jen nejde videt … stacilo dat kalendari z-index a tim se vse vyresilo.

Podle me, bude u tebe stejny problem.

igi

sin

ja tedka narazim na cim dal tim vice problemu s tim formularem … kdyz jsem ho dal do ajaxového okna tak prestala fungovat standartní validace… ale zkusim tedka to co pise iguana007 a napisu

Jo igiunana007 mel pravdu, chtelo to dat to jine vrstvy… Určitě už se to řešilo ale nemuzu to najit… problemy s JS v ajaxove vyvolanem okenku… Nemate nekdo typy co si mam prostudovat?

Editoval sin (28. 1. 2010 16:19)

JakubJarabica

Práve idem datePicker použiť aj ja a problém je len v tom, že v deme sa odkazuje na 404ky miesto niektorých javascriptov: http://farm5.static.flickr.com/…3f2af3_o.jpg.

iguana007

Použij zdrojový kód z dema na svém localhostu a jen nahraď cesty k JS knihovnám. Mělo by stačit nahradit toto:

	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/latest/ui/i18n/ui.datepicker-cs.js"></script>

Tímto:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" charset="utf-8">
        google.load("jquery", "1.4.1");
        google.load("jqueryui", "1.7.2");
  </script>

Editoval iguana007 (11. 2. 2010 5:07)

Endrju

Zkousel jsem pouzit validator s regularnim vyrazem, ale prestoze JS validace projde, tak po submitu formu mi PHP validace hlasi problem. Takze pravdepodobne nebude neco uplne v poradku v kombinace Form::addDatePicker() a formularovou validaci.

Momentalne to lze obejit takto tak, ze misto dtaepickeru pouziju norlani text a nastavim mu class ‚datepicker‘ (to same pak pro plugin DateTimePicker):

protected function createComponentDateForm($name)
{
	$form = new AppForm($this, $name);

	...
	$form->addText('datum', 'Datum', 10, 10)->getControlPrototype()->class('datepicker');
	...
}

EDIT: taky jsem behem „nasazovani“ zjistil, ze jQuery UI 1.8 si s timto pluginem taky moc nerozumi. Jsem nucem pouzivat verzi 1.7.2 (teady tu jakou pouziva auto) pluginu.

Editoval Endrju (13. 4. 2010 22:18)

Honza Marek

Endrju napsal(a):

Zkousel jsem pouzit validator s regularnim vyrazem, ale prestoze JS validace projde, tak po submitu formu mi PHP validace hlasi problem. Takze pravdepodobne nebude neco uplne v poradku v kombinace Form::addDatePicker() a formularovou validaci.

To je tím, že v php se validuje už převedená forma pro mysql (takové to 2010–04–03).

EDIT: taky jsem behem „nasazovani“ zjistil, ze jQuery UI 1.8 si s timto pluginem taky moc nerozumi. Jsem nucem pouzivat verzi 1.7.2 (teady tu jakou pouziva auto) pluginu.

Divné. Používal jsi třeba jQuery UI 1.8 s jQuery 1.4?

cavalier

Začínám s programováním v Nette a potřeboval bych rozjet rozšíření DatPicker.

Kam mám vložit tuto část kódu:

<?php
// budoucí metoda Form::addDatePicker()
function Form_addDatePicker(Form $_this, $name, $label, $cols = NULL, $maxLength = NULL)
{
    return $_this[$name] = new DatePicker($label, $cols, $maxLength);
}


Form::extensionMethod('Form::addDatePicker', 'Form_addDatePicker'); // v PHP 5.2
//Form::extensionMethod('addDatePicker', 'Form_addDatePicker'); // v PHP 5.3
?>

Prosím o radu co je k rozjetí tohoto doplňku. Z testovacího příkladu jsem to moc nepochopil a na stránce tohoto doplňku toho taky moc není. Díky.

Honza Kuchař

Na to žádné jednotné místo nemáme. Ale když to plácneš do bootstrap.php, tak to pojede.

cavalier

Děkuji za radu, pomohlo to ;-) Ještě bych měl poslední dotaz a to potřebuji aby mi DatePicker vytvořil datum ve formátu RRRR-MM-DD (Y-m-d). Díky.

Honza Kuchař

Tak to už ti z hlavy neřeknu, ale podívek se do API to kalendáře. Je to nějaký jQuery udělátko. Mají to dobře zdokumentované.

Pokud si správně pamatuji, tak ten doplněk do datum přeformátovává do formátu, co požaduje MySQL, takže to asi bude potřeba přizpůsobit. Ale to zvládneš, je to pár řádků.

cavalier

Ok mrknu do toho API, bude pro mě také důležité kalendář počeštit a nastavit, aby pondělí bylo první den v týdnu.

Endrju

cavalier: zrovna jsem ti odepisoval mail, ale koukam, ze uz jsi to rozchodil. Jinak zmenu formatu najdes v tom API a tady je priklad primo na jQuery UI

Takze pokud chces vystupni datum ve formuatu YYYY-MM-DD, tak ke svemu stavajicimu scriptu pridas:

<script type="text/javascript">
<!-- <![CDATA[
$(document).ready(function()
{
	$('input.datepicker').datepicker(
	{
		...
		dateFormat: 'yy-mm-dd',
		...
	});
});
//]]> -->
</script>

cavalier

Děkuji za poskytnutí rychlých rad. Prvně jsem to totiž hledal někde v php kódu a ono to nastavení bylo nakonec na straně jQuery UI. Díkec ;-)

Honza Kuchař

Ještě lépe se to dělá pomocí defaults. Aplikuje to to potom na všechny kalendáříky:

	$.datepicker.setDefaults($.datepicker.regional['cs']); // Aby toto fungovalo, musíš si ještě načíst soubor češtiny někde z hlubin jQuery UI ;)
$.datepicker.setDefaults({
    numberOfMonths: 2,
    stepMonths:     2,
    showCurrentAtPos: 1,
    //showOtherMonths: true,
    showOptions: {direction: 'up' },
    showButtonPanel: true
});

cavalier

Dobrá rada. Já jsem to vyřešil následovně:

<script type="text/javascript">
<!-- <![CDATA[
    $(document).ready(function(){
        $('input.datepicker').datepicker($.datepicker.regional['cs']);
        $('input.datepicker').datepicker({ duration: 'fast' });
        $('input.datepicker').datepicker( { altField: '#actualDate' } );
        $('input.datepicker').datepicker( "option", "dateFormat", 'yy-mm-dd' );
    });
//]]> -->
</script>

Ještě bych chtěl dodělat, aby nebylo možné vložit všechny data od včerejška do minulosti. Aby bylo možné vložit jen dnešní datum a data budoucí.

meris

cavalier:
jquery datepicker umí zadávat data různě, pomoci minDate, maxDate, kde to vložíš takto:

<script type="text/javascript">
<!-- <![CDATA[
$(document).ready(function(){
  $.datepicker.setDefaults($.datepicker.regional['cs']);
	$('input.datepicker').datepicker( {  duration: 'fast', minDate: -1, maxDate: 365, altField: '#actualDate' });
});

//]]> -->
</script>

Bernard Williams

Mohl by někdo tento doplněk nasdílet? Původní odkaz mi nefunguje. Díky

chemikus

Honza Kuchař napsal(a):

Ještě lépe se to dělá pomocí defaults. Aplikuje to to potom na všechny kalendáříky:

	$.datepicker.setDefaults($.datepicker.regional['cs']); // Aby toto fungovalo, musíš si ještě načíst soubor češtiny někde z hlubin jQuery UI ;)
$.datepicker.setDefaults({
    numberOfMonths: 2,
    stepMonths:     2,
    showCurrentAtPos: 1,
    //showOtherMonths: true,
    showOptions: {direction: 'up' },
    showButtonPanel: true
});

A můžeš prosím sdělit, kde se nachází ta čeština přesně? Nějak ji nemohu dohledat :-(

finc

Pro lokalizaci a pro české formátování stačí použít toto:

<script>
$(document).ready(function(){

    $('input.datepicker').datepicker({
        duration: 'fast',
        dateFormat: 'dd.mm.yy'
    });

    $( "#datepicker" ).datepicker( $.datepicker.regional[ "cs" ] );

    jQuery(function($){
        $.datepicker.regional['cs'] = {
            closeText: 'Zavřít',
            prevText: '&#x3c;Dříve',
            nextText: 'Později&#x3e;',
            currentText: 'Nyní',
            monthNames: ['leden','únor','březen','duben','květen','červen',
            'červenec','srpen','září','říjen','listopad','prosinec'],
            monthNamesShort: ['led','úno','bře','dub','kvě','čer',
            'čvc','srp','zář','říj','lis','pro'],
            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'],
            weekHeader: 'Týd',
            dateFormat: 'dd.mm.yy',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: ''
        };
        $.datepicker.setDefaults($.datepicker.regional['cs']);
    });

});
</script>

Editoval finc (11. 10. 2010 13:19)