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.
The best way to install ipub/form-datetime is using Composer:
{
"require": {
"ipub/form-datetime": "dev-master"
}
}or
$ composer require ipub/form-datetime:@devAfter that you have to register extension in config.neon.
extensions:
formDateTime: IPub\FormDateTime\DI\FormDateTimeExtensionIn 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.
$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:
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();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]);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)This type of picker combines all settings from previous two types.
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 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)));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"}
