Nette-date-time

, _(*1)

Nette addon form for select date or datetime in input., _(*2)

time input , _(*3)

Installation

Install with composer:, _(*4)

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, _(*5)

Usage Sample

to bootstrap.php add register line OR add line in config.neon, _(*6)

//$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), _(*7)

presenter set value:, _(*8)

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:, _(*9)

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, _(*10)

$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, _(*11)

    $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:, _(*12)

<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">

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'
            ]
        }
    }
}