README

用于Nette框架表单的日期、日期和时间字段表单控件

此扩展基于两个日期时间库。对于Bootstrap模板，使用了来自Sebastien Malot的js库，对于UIkit模板，使用了它们的日期选择器和时间选择器扩展。

安装

安装ipub/form-datetime的最佳方式是使用Composer

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

或者

$ composer require ipub/form-datetime:@dev

之后，您需要在config.neon中注册扩展。

extensions:
	formDateTime: IPub\FormDateTime\DI\FormDateTimeExtension

在Nette 2.0中，在app/bootstrap.php中注册

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

您还需要将静态文件包含到您的页面中

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

注意：您需要从客户端站点文件夹上传静态文件到您的项目。

使用

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

您可以为每种表单字段类型传递配置

所有类型的设置

您可以启用额外的按钮，用于控制显示的表单字段

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

日期选择器的设置

只需设置日期选择器窗口应如何显示

$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]);

时间选择器的设置

只需设置时间选择器窗口应如何显示

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

日期和时间选择器的设置

此类型选择器结合了前两种类型的所有设置。

定义日期和时间格式

您可以为每个字段设置其格式，以在表单中显示值。

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

这两种方法都需要JS格式，因此对于两位数的日/月和四位数的年，请写成dd/mm/yyyy等。

验证

验证可以像常规文本输入一样进行，并且这些字段还支持特殊的范围值。

如果您需要定义选择值的范围，可以使用字段范围规则

$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))]);

此规则还将创建选择器窗口的最小值和最大值，因此用户将无法选择定义范围之外的日期。

还有两个规则用于最小值和最大值

$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)));

自定义模板和渲染

此控件包含模板功能，这意味着此控件的表单元素使用Latte模板进行渲染。有3个预定义模板

• bootstrap.latte 如果你使用 Twitter Bootstrap
• uikit.latte 如果你使用 YooTheme UIKit
• default.latte 用于自定义样式（此模板默认加载）

但请注意，如果你选择不同于UIKit或Bootstrap的模板，JS将被禁用！

你也可以定义自己的模板，如果你需要将此控件适配到你的布局中。

模板可以在表单定义中设置

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

或在表单的手动渲染器中

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

并且如果你想将默认模板切换到 bootstrap 或 uikit，只需在模板设置器中写入即可

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

或者

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