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