ipub/form-datetime

Forms control for adding date, date&time and time fields for Nette Framework

Form Date, Date&Time and Time control

, _(*1)

Forms control for adding date, date&time and time fields for Nette Framework forms, _(*2)

This extension is based on two datetime libraries. For Bootstrap template is used js library from Sebastien Malot and for UIkit template is used their datepicker and timepicker extensions., _(*3)

Installation

The best way to install ipub/form-datetime is using Composer:, _(*4)

{
    "require": {
        "ipub/form-datetime": "dev-master"
    }
}

or, _(*5)

$ composer require ipub/form-datetime:@dev

After that you have to register extension in config.neon., _(*6)

extensions:
    formDateTime: IPub\FormDateTime\DI\FormDateTimeExtension

In Nette 2.0, registration is done in app/bootstrap.php:, _(*7)

$configurator->onCompile[] = function ($configurator, $compiler) {
    $compiler->addExtension('formDateTime', new IPub\FormDateTime\DI\FormDateTimeExtension);
};

And you also need to include static files into your page:, _(*8)

    <script src="{$basePath}/libs/ipub.formDateTime.js"></script>
</body>

note: You have to upload static files from client-site folder to your project., _(*9)

Usage

$form->addDatePicker('date', 'Date picker:');
$form->addDateTimePicker('datetime', 'Date & time picker:');
$form->addTimePicker('time', 'Time picker:');

You can pass configuration for each type of form field:, _(*10)

Settings for all types

You can enable additional buttons which can control showed form field:, _(*11)

$form
    ->addDateTimePicker('datetime', 'Date & time picker:')
    // Enable trigger button to open date/time picker
    ->enableTriggerButton()
    // Enable cancel button to clear field
    ->enableCancelButton();

Settings for Date picker

Just setup how date picker window should display:, _(*12)

$form
    ->addDatePicker('date', 'Date picker:')
    // Set week start day
    ->setWeekStart(1) // 0 for sunday, 6 for saturday
    // Disable some days from week, this days can not be selected via picker
    ->setDaysOfWeekDisabled([0, 6]);

Settings for Time picker

Just setup how time picker window should display:, _(*13)

$form
    ->addTimePicker('time', 'Time picker:')
    // Set week start day
    ->setShowMeridian(TRUE) // Show time in meridian format (e.g. 04:15 PM)

Settings for Date & Time picker

This type of picker combines all settings from previous two types., _(*14)

Defining date and time formats

You can set for each field its format how value should be displayed in form., _(*15)

$form
    ->addDateTimePicker('datetime', 'Date & time picker:')
    // Set date format
    ->setDateFormat('yyyy/dd/mm')
    // Set time format
    ->setTimeFormat('hh:ii:ss');

This two methods require JS format, so for two digits day/mont and four digits year write dd/mm/yyyy etc., _(*16)

Validation

Validation can be done as on usual text input and also this fields support special ranges values., _(*17)

If you need to define some range for selecting value, you can use filed range rule:, _(*18)

$form
    ->addDateTimePicker('datetime', 'Date & time picker:')
    // Set date format
    ->addRule(\IPub\FormDateTime\Controls\DateTime::DATE_TIME_RANGE, 'Date must be between defined values', [(new Utils\DateTime(2015-01-01)), (new Utils\DateTime(2015-09-01))]);

This rule will also create min and max for picker window, so user will be not able to pick date out of defined range., _(*19)

There are also nex two rules for minimal and maximal value:, _(*20)

$form
    ->addDateTimePicker('datetime', 'Date & time picker:')
    // Set date format
    ->addRule(\IPub\FormDateTime\Controls\DateTime::DATE_TIME_MIN, 'Date must be higher than selected', (new Utils\DateTime(2015-01-01)));
    ->addRule(\IPub\FormDateTime\Controls\DateTime::DATE_TIME_MAX, 'Date must be lower than selected', (new Utils\DateTime(2015-09-01)));

Custom templates and rendering

This control come with templating feature, that mean form element of this control is rendered in latte template. There are 3 predefined templates:, _(*21)

• bootstrap.latte if you are using Twitter Bootstrap
• uikit.latte if you are using YooTheme UIKit
• default.latte for custom styling (this template is loaded as default)

But be aware, if you choose different template than UIkit or Bootstrap, JS will be deactivated!, _(*22)

You can also define you own template if you need to fit this control into your layout., _(*23)

Template can be set in form definition:, _(*24)

$form
    ->addDateTimePicker('datetime', 'Date & time picker:')
    ->setTemplateFile('path/to/your/template.latte');

or in manual renderer of the form:, _(*25)

{?$form['datetime']->setTemplateFile('path/to/your/template.latte')}
{input datetime class => "some-custom-class"}

and if you want to switch default template to bootstrap or uikit just it write into template setter:, _(*26)

$form
    ->addDateTimePicker('datetime', 'Date & time picker:')
    ->setTemplateFile('bootstrap.latte');

or, _(*27)

{?$form['datetime']->setTemplateFile('bootstrap.latte')}
{input datetime class => "some-custom-class"}