README

Nette addon form for select date or datetime in input.

Installation

Install with composer:

composer require venca-x/nette-date-time:v1.1.x-dev

Requirements

PHP 7.1 or later
nette/forms 3.0 or later
nette/utils 3.0 or later
jQuery 1.9.1 or later
jQuery UI 1.10.2 or later (DatePicker and DateTimePicker only)

For Nette 2.3 use branch v1.0

Usage Sample

to bootstrap.php add register line OR add line in config.neon

//$configurator->createRobotLoader()
//	->addDirectory(__DIR__)
    //	->addDirectory(__DIR__ . '/../libs')
    //	->register();

VencaX\NetteDateTime\NetteDateTimePicker::register();

// Create Dependency Injection container from config.neon file

Usage

$form->addDate("name", "Label:", "type")

types:

datetime - set date and time
date - set date
month - sem month (with year)
time - set time (H:i)
timesec - set time with sec (H:i:s)

presenter set value:

protected function concertForm()
{
    $form = new UI\Form;
    
    $form->addDate("datetime", "Date time:", "datetime")
        ->setValue(date("d.m.Y H:i"));
    
    $form->addDate("date", "Date:", "date")
        ->setValue(date("d.m.Y"));
    
    $form->addDate("month", "Month:", "month")
        ->setValue(date("d.m.Y"));
        
    $form->addDate("month2", "Month2:", "month")
        ->setValue(date("m Y"));
    
    $form->addDate("time", "time:", "time")
        ->setValue(date("H:i"));
    
    $form->addDate("timesec", "timesec:", "timesec")
        ->setValue(date("H:i:s"));
    
    $form->addSubmit('send', 'Show');
}

Or presenter set DatTime value:

protected function concertForm()
{
    $form->addDate("datetime", "Date time:", "datetime")
        ->setValue(new DateTime());
    
    $form->addDate("date", "Date:", "date")
        ->setValue(new DateTime());
    
    $form->addDate("month", "Month:", "month")
        ->setValue(new DateTime());
    
    $form->addDate("time", "time:", "time")
        ->setValue(new DateTime());
    
    $form->addDate("timesec", "timesec:", "timesec")
        ->setValue(new DateTime());
        
    $form->addSubmit('send', 'Show');
}

Submit form

All data from this plugin are send as Nette\Utils\DateTime

$form->onSuccess[] = function ($form) {
 
    dump($form->getValues());
    $this->terminate();
    /*
    Nette\Utils\ArrayHash #6daf
        datetime => Nette\Utils\DateTime #8732
            date => "2017-08-25 21:48:00.000000" (26)
            timezone_type => 3
            timezone => "Europe/Prague" (13)
        date => Nette\Utils\DateTime #c228
            date => "2017-08-25 21:53:19.000000" (26)
            timezone_type => 3
            timezone => "Europe/Prague" (13)
        month => Nette\Utils\DateTime #cd2a
            date => "2017-08-25 21:53:19.000000" (26)
            timezone_type => 3
            timezone => "Europe/Prague" (13)
        time => Nette\Utils\DateTime #7e7b
            date => "2017-08-25 21:48:00.000000" (26)
            timezone_type => 3
            timezone => "Europe/Prague" (13)
        timesec => Nette\Utils\DateTime #d546
            date => "2017-08-25 21:48:51.000000" (26)
            timezone_type => 3
            timezone => "Europe/Prague" (13)
    */
};

For showing the selected values use ->fomrat("xxx") on Nette\Utils\DateTime

    $a = $form->getValues(true);
 
    $a['datetime']->format('d.m.Y H:i');
    $a['date']->format('d.m.Y');
    $a['month']->format('m Y');
    $a['time']->format('H:i');
    $a['timesec']->format('H:i:s');

@layout.latte presenter:

<link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/blitzer/jquery-ui-1.10.4.custom.min.css">
<link rel="stylesheet" media="screen,projection,tv" href="{$basePath}/css/style.css">

<script type="text/javascript" src="{$basePath}/js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="{$basePath}/js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="{$basePath}/js/netteDateTimePicker.js"></script>

npm

npm install jquery@3.*.* --save-dev                 //install last version 3.x
npm install jquery-ui-dist@1.*.* --save-dev         //install last version 1.x

Grunt

concat: {
    js: {
        src: ['node_modules/jquery/dist/jquery.min.js',
                'node_modules/popper.js/dist/umd/popper.min.js',
                'node_modules/bootstrap/dist/js/bootstrap.min.js',
                'node_modules/jquery-ui-dist/jquery-ui.min.js',
                'vendor/nette/forms/src/assets/netteForms.min.js',
                'vendor/venca-x/nette-date-time/client/js/jquery-ui-timepicker-addon.js',
                'vendor/venca-x/nette-date-time/client/js/netteDateTimePicker.js',
                'src/js/main.js'
            ],
        dest: 'www/js/compiled.min.js'
    }
},
cssmin: {
    target: {
        files: {
            'www/css/main.min.css': [
                'node_modules/jquery-ui-dist/jquery-ui.min.css',
                'vendor/venca-x/nette-date-time/client/css/style.css',
                'www/css/main.css'
            ]
        }
    }
}

Migrate from version 1.0.x to 1.1.x

change namespace from Nette\Forms\NetteDateTime to VencaX\NetteDateTime\NetteDateTimePicker

venca-x / nette-date-time

Maintainers

Details