Form component for Nette Framework supporting all HTML 5 date inputs.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
tests
.gitignore
.travis.yml
LICENSE
bower.json
changeNetteVersion.sh
composer.json
dateInput.css
dateInput.js
makefile
readme.md

readme.md

Form 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 exmaples at the demo page.

JS dependencies

Installation

$ composer require voda/date-input:~1.0.0

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: {
            dateFormat: 'd.m.yy',
            timeFormat: 'H:mm',
            options: { // options for type=datetime
                changeYear: true
            }
        },
        'datetime-local': {
            dateFormat: 'd.m.yy',
            timeFormat: 'H:mm'
        },
        date: {
            dateFormat: 'd.m.yy'
        },
        month: {
            dateFormat: 'MM yy'
        },
        week: {
            dateFormat: "w. 'week of' yy"
        },
        time: {
            timeFormat: 'H:mm'
        },
        options: { // global options
            closeText: "Close"
        }
    });
});