DatePicker

Formulářová komponenta sloužící k výběru data, využívá jQuery UI a HTML 5

Verze 2.3 (seznam změn)
Aktualizováno 23. 6. 2012
Požadavky Nette Framework 2.0, jQuery 1.4.3+, jQuery UI
Autor Jan Tvrdík
Licence MIT
Stáhnout DatePicker

Základní informace

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));
                });
                tmp.data(el.data());
                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 00:00'), new DateTime('+14 days 00:00')));

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>