Verze	2.1 (seznam změn)
Aktualizováno	31. 1. 2011
Požadavky	Nette Framework 2.0-dev, jQuery 1.4.3+, jQuery UI
Autor	Jan Tvrdík
Licence	MIT

• DatePicker pro PHP 5.3 (se jmennými prostory)
• DatePicker pro PHP 5.2
• DatePicker pro PHP 5.2 bez prefixů

Základní informace

• Interně pracuje s DateTime (metoda getValue() vrací vždy buď instanci DateTime nebo NULL).
• Generuje validní HTML 5 kód.
• Pro vykreslení kalendáříku používá jQuery UI DatePicker s fallbackem na HTML5 a následně HTML 4. (Pokud prohlížeč nepodporuje ani JS ani HTML 5, zobrazí se běžné textové pole, do kterého uživatel zadá datum ručně.)
• Umožňuje omezit minimální a maximální datum, které lze zvolit.

Instalace

1. Zkontrolujte, zda splňujete minimální požadavky
2. Stáhněte si distribuční balík
3. Adresář DatePicker zkopírujte k ostatním knihovnám ve vaší aplikaci (např. do libs/DatePicker)
4. Zkontrolujte, zda máte správně přilinkované jQuery a jQuery UI. Pokud nemáte, lze tak učinit např. takto:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   <link rel="stylesheet" media="screen,projection,tv"
       href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css">

5. Doplňte lokalizaci (seznam lokalizací)

   <script>
   /* Czech initialisation for the jQuery UI date picker plugin. */
   /* Written by Tomas Muller (tomas@tomas-muller.net). */
   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>

6. Doplňte kód pro navázání jQuery na input.

   <script>
   $(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 ? $.datepicker.parseDate($.datepicker.W3C, value) : null);
   
           var minDate = el.attr("min") || null;
           if (minDate) minDate = $.datepicker.parseDate($.datepicker.W3C, minDate);
           var maxDate = el.attr("max") || null;
           if (maxDate) maxDate = $.datepicker.parseDate($.datepicker.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.datepicker({
               minDate: minDate,
               maxDate: maxDate
           });
           el.val($.datepicker.formatDate(el.datepicker("option", "dateFormat"), date));
       });
   });
   </script>

7. Zaregistrujte si metodu addDatePicker do FormContaineru.

   use Nette\Forms\FormContainer;
   FormContainer::extensionMethod('addDatePicker', function (FormContainer $container, $name, $label = NULL) {
       return $container[$name] = new JanTvrdik\Components\DatePicker($label);
   });

Ukázka použití

Po dokončení instalace už můžete začít DatePicker používat.

$form = new Form();
$form->addDatePicker('datePicker1');
$form->addDatePicker('datePicker2')
    ->addRule(Form::FILLED, 'Date is required')
    ->addRule(Form::VALID, 'Entered date is not valid!');
$form->addDatePicker('datePicker3')
    ->addRule(Form::VALID, 'Entered date is not valid!')
    ->addCondition(Form::FILLED)
        ->addRule(Form::RANGE, 'Entered date is not within allowed range.', array(new DateTime('-14 days'), new DateTime('+14 days')));

Výběr data narození

DatePicker z jQuery UI umožňuje ve výchozí konfiguraci nejrychlejší pohyb po měsících. Zadávání data narození je tak velmi nepohodlné a vyžaduje několik desítek až stovek kliknutí.

Pro odlišení od ostatních inputů použijeme CSS třídu birthDate. Za obecnou inicializaci jQuery UI DatePickeru doplníme úpravu konfigurace pro inputy s třídou birthDate. K povolení rychlé změny měsíce a roku slouží možnosti changeMonth a changeYear. Doporučuji vám prohlédnout si seznam všech dostupných možností.

$form->addDatePicker('birthDate')
    ->setAttribute('class', 'birthDate')
    ->addRule(Form::VALID, 'Entered birth date is not valid!');

<script>
$(document).ready(function () {
    $("input.date.birthDate")
        .datepicker("option", "changeMonth", true)
        .datepicker("option", "changeYear", true);
});
</script>