venca-x/nette-date-time

Nette addon. Extension form for date and time

1.1.1 2018-06-05 14:41 UTC

README

Build Status Coverage Status Latest Stable Version Total Downloads Latest Unstable Version License

Nette addon form for select date or datetime in input.

time input

Installation

Install with composer:

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

Requirements

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