README

基于已废弃的库 https://github.com/ipublikuj-archive/form-datetime 由 Adam Kadlec。

Nette Framework 表单中添加日期、日期和时间字段的表单控件

此扩展基于两个日期时间库。对于 Bootstrap 模板使用来自 Sebastien Malot 的 UIkit 模板，使用他们的 datepicker 和 timepicker 扩展。

安装

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

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

或者

$ composer require metisfw/form-datetime:@dev

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

extensions:
	formDateTime: MetisFW\FormDateTime\DI\FormDateTimeExtension

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

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

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

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

注意：您必须从 client-site 文件夹上传静态文件到您的项目中。

使用方法

$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(\MetisFW\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(\MetisFW\FormDateTime\Controls\DateTime::DATE_TIME_MIN, 'Date must be higher than selected', (new Utils\DateTime(2015-01-01)));
	->addRule(\MetisFW\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"}