Form Date, Date&Time and Time control

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

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.

Installation

The best way to install ipub/form-datetime is using Composer:

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

or

$ composer require ipub/form-datetime:@dev

After that you have to register extension in config.neon.

extensions:
	formDateTime: IPub\FormDateTime\DI\FormDateTimeExtension

In Nette 2.0, registration is done in app/bootstrap.php:

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

And you also need to include static files into your page:

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

note: You have to upload static files from client-site folder to your project.

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:

Settings for all types

You can enable additional buttons which can control showed form field:

$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:

$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:

$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.

Defining date and time formats

You can set for each field its format how value should be displayed in form.

$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.

Validation

Validation can be done as on usual text input and also this fields support special ranges values.

If you need to define some range for selecting value, you can use filed range rule:

$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.

There are also nex two rules for minimal and maximal value:

$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:

• 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!

You can also define you own template if you need to fit this control into your layout.

Template can be set in form definition:

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

or in manual renderer of the form:

{?$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:

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

or

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