voda / date-input
HTML 5 compatible date / time input field for Nette.
Installs: 79 649
Dependents: 2
Suggesters: 0
Security: 0
Stars: 10
Watchers: 3
Forks: 11
Open Issues: 5
Requires
- php: >=7.2.0
- nette/forms: ~2.4|~3.0
Requires (Dev)
- nette/tester: ~1.7.2
README
Nette forms component for selecting date and time values.
In PHP this addon works with DateTime objects, in the browser it uses jqueryUI calendar with timepicker addon. Look at some examples at the demo page.
JS dependencies
- jQuery and jQueryUI
- Timepicker addon version 1.1.0 or newer
Installation
$ composer require voda/date-input
package can be also installed using bower: $ bower install voda-date-input --save
insert required javascript and style files into your layout (order of scripts is important):
<script type='text/javascript' src="{$basePath}/scripts/jquery-ui-timepicker-addon.js"></script> <script type='text/javascript' src="{$basePath}/scripts/dateInput.js"></script> <link rel="stylesheet" type="text/css" href="{$basePath}/styles/jquery-ui-timepicker-addon.css"> <link rel="stylesheet" type="text/css" href="{$basePath}/styles/dateInput.css">
register the addon in your bootstrap.php:
Vodacek\Forms\Controls\DateInput::register();
initialize the calendar using javascript:
$(document).ready(function() { $('input[data-dateinput-type]').dateinput({ 'datetime-local': { dateFormat: 'd.m.yy', timeFormat: 'H:mm', options: { // options for type=datetime-local changeYear: true } }, date: { dateFormat: 'd.m.yy' }, month: { dateFormat: 'MM yy' }, week: { dateFormat: "w. 'week of' yy" }, time: { timeFormat: 'H:mm' }, options: { // global options closeText: "Close" } }); });
Usage
$form->addDate('datetimeLocal', 'Local datetime', DateInput::TYPE_DATETIME_LOCAL) ->setRequired() ->setDefaultValue(new DateTimeImmutable()) ->addRule(Form::RANGE, null, array(new DateTimeImmutable('-2 years'), new DateTimeImmutable('+2 years')));