nefunkcny druhy datepicker vo formulari

stewe

zdravim,

pokusam sa dostat do formulara dva datepickery. V presenteri si postavim cez tovarnu komponentu formulara, kde pridam dva datepicker-y

<?php
	$form->addDatePicker('datePicker1')
	    ->addRule(Form::FILLED, 'Dátum začiatku musí byť vyplnený')
	    ->addRule(Form::VALID, 'Zadaný dátum nie je validný!');

	$form->addDatePicker('datePicker2')
	    ->addRule(Form::FILLED, 'Dátum ukončenia musí byť vyplnený')
	    ->addRule(Form::VALID, 'Zadaný dátum nie je validný!');
?>

Nasledne si ho vykreslim v sablone add.late, @layout.latte vyzera takto

<html>
    <head>
	<link type="text/css" href="{$basePath}/css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="{$basePath}/js/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="{$basePath}/js/jquery-ui-1.8.14.custom.min.js"></script>
	<script type="text/javascript" src="{$basePath}/js/jquery-ui-timepicker-addon.js"></script>
	<script type="text/javascript" src="{$basePath}/js/jquery.ui.datepicker-sk.js"></script>
	<script type="text/javascript">
$(document).ready(function () {
    $("input.date").each(function () { // input[type=date] does not work in IE
        var el = $(this);
        var value = el.val();
        var date = (value ? $.datetimepicker.parseDate($.datetimepicker.W3C, value) : null);

        var minDate = el.attr("min") || null;
        if (minDate) minDate = $.datetimepicker.parseDate($.datetimepicker.W3C, minDate);
        var maxDate = el.attr("max") || null;
        if (maxDate) maxDate = $.datetimepicker.parseDate($.datetimepicker.W3C, maxDate);

        // input.attr("type", "text") throws exception
        if (el.attr("type") == "date") {
            var tmp = $("<input/>");
            $.each("class,disabled,id,maxlength,name,readonly,required,size,style,tabindex,title,value".split(","), function(i, attr)  {
                tmp.attr(attr, el.attr(attr));
            });
            el.replaceWith(tmp);
            el = tmp;
        }
        el.datetimepicker({
            minDate: minDate,
            maxDate: maxDate
        });
        el.val($.datetimepicker.formatDate(el.datetimepicker("option", "dateFormat"), date));
    });
});
	</script>
	<style>
	    .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
	    .ui-timepicker-div dl{ text-align: left; }
	    .ui-timepicker-div dl dt{ height: 25px; }
	    .ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
	    .ui-timepicker-div td { font-size: 90%; }
	</style>
    </head>
    <body>
	{block #content}
	{/block}
    </body>
</html>

add.latte takto

{include '@layout.latte'}
{block #content}
{form eventAddForm}
    <table align="center">
        <tr><th>{label category   /}</th><td>{input category} </td></tr>
        <tr><th>{label name       /}</th><td>{input name} </td></tr>
        <tr><th>Dátum začiatku:     </th><td>{input datePicker1}</td></tr>
	<tr><th>Dátum ukončenia:    </th><td>{input datePicker2}</td></tr>
        <tr><th></th><td>{input send}</td></tr>
        <tr><td colspan="2"><hr></td></tr>

	{foreach $form->errors as $error}
            <tr><td colspan="2">{$error}</td></tr>
            {last}<tr><td colspan="2"><hr></td></tr>{/last}
        {/foreach}
    </table>
{/form eventAddForm}
{/block}

Ide ale o to, ze ten datepicker sa mi objavi len pri kliknuti do prveho inputu, do „Datum zaciatku“.
Pri druhom poli sa mi zobrazia spolu s textovym polom aj take male dve sipky, ktorymi mozem nastavit datum (a cas) ale nic to nespravi, ked tam klepnem mysou, na rozdiel od prveho kalendara.

Viem ze to je nieco s javascriptom, ale neviem ako to vyriesit. Pouzil som ukazkovy priklad odtialto:
http://nette.merxes.cz/date-picker/ bod c.6

Ten javascript sa teda „naviaze“ na prve input pole, ale co s druhym kalendarom?

obrazok:
http://img834.imageshack.us/i/imgir.png/

Dakujem za rady

nette-2.0beta, php5.3

Editoval stewe (10. 7. 2011 21:30)

stewe

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