README

将日期选择器控件添加到由 Twitter Bootstrap 样式化的 Nette 表单

基于

• https://github.com/lichtner/bootstrap-datepicker (原始来自 Stefan Petre 的 http://www.eyecon.ro/bootstrap-datepicker/)
• https://github.com/JanTvrdik/NetteExtras/tree/master/NetteExtras/Components/DatePicker

##配置

######1) 附加必要的文件（jQuery、Twitter Bootstrap 和 netteForms 是必需的）和以下行

<link href="{$basePath}/css/datepicker.css" rel="stylesheet" media="screen">
<script src="{$basePath}/js/bootstrap-datepicker.js"></script>

您可以附加语言文件。

	<script src="{$basePath}/js/bootstrap-datepicker.cs.js"></script>

翻译可以从 https://github.com/lichtner/bootstrap-datepicker/tree/master/js/locales 下载，或者您可以自己制作。

######2) 初始化日期选择器

	$(document).ready(function () {
		$('.bootstrapDatePicker').datepicker();
	});

######3) 向所有表单添加扩展方法（日期格式和语言设置为全局）

		\Flame\Forms\Controls\BootstrapDatePicker::register();

默认值（'yyyy-mm-dd', 'en', 'addDatePicker'）

使用示例

		$form->addDatePicker('date', "Date")
		->setClassName('myBetterClass')//'bootstrapDatePicker' defalt
		->setAutoclose(true)//false default
		->setTodayHighlight()//or setTodadyHighlight(true); false default
		->setWeekStart(1)//0 for Sunday, 6 for Saturday; 1 is default
		->setKeyboardNavigation()//or setKyeboardnavigation(true); true default
		->setTodayButton(\Flame\Forms\Controls\BootstrapDatePicker::TODAY_BUTTON_TRUE)//TODAY_BUTTON_FALSE | TODAY_BUTTON_TRUE | TODAY_BUTTON_LINKED; TODAY_BUTTON_FALSE default
		->setStartview(\Flame\Forms\Controls\BootstrapDatePicker::STARTVIEW_MONTH)//STARTVIEW_MONTH | STARTVIEW_YEAR | STARTVIEW_DECADE; STARTVIEW_MONTH default
		->setRequired()
		->setInputButtonStyle(\Flame\Forms\Controls\BootstrapDatePicker::BUTTON_STYLE_ICON_RIGHT)//BUTTON_STYLE_ICON_LEFT | BUTTON_STYLE_ICON_RIGHT | BUTTON_STYLE_ICON_NONE; BUTTON_STYLE_ICON_RIGHT default
		->addCondition(Nette\Forms\Form::FILLED)
		->addRule(
			\Flame\Forms\Controls\BootstrapDatePicker::DATE_RANGE,
			'Entered date is not within allowed range.',
			array(new DateTime('2012-10-02'),	null));

或者您可以使用

	  ->addRule(
			Flame\Forms\Controls\BootstrapDatePicker::DATE_RANGE,
			'Entered date is not within allowed range.',
			array(new DateTime('2012-10-02'), null));

来仅设置日历最小值（或仅设置最大值）。日期选择器将仅显示适用日期。值在提交时通过 JavaScript 和然后通过服务器端的 PHP 进行检查。

使用 Flame\Forms\Controls\BootstrapDatePicker::DATE_RANGE 应用日期范围。 \Nette\Forms\Form::RANGE 不会工作

控件生成如下内容

	<div class="input-append date myBetterClass"
		data-date-autoclose="true"
		data-date-start-view="0"
		data-date-today-btn="1"
		data-date-today-highlight="1"
		data-date-weekstart="1"
		data-date-keyboard-navigation="1"
		data-date-format="dd.mm.yyyy"
		data-date-language="cs"
		data-date-startdate="02.10.2012">
			<input type="text"
				class="text" name="date"
				id="frmform-date"
				required="required"
				data-nette-rules="{op:':filled',msg:'Please complete mandatory field.'},{op:':filled',rules:[{op:':dateRange',msg:'Entered date is not within allowed range.',arg:[{date:'2012-10-02 00:00:00',timezone_type:3,timezone:&quot;Europe\/Prague&quot;},null]}],control:'date'}">
			<span class="add-on"><i class="icon-calendar"></i></span>
	</div>