alexvasilyev/datetimepicker-bundle

Symfony bundle for Bootstrap DateTime picker

DatetimepickerBundle

This bundle implements the Bootstrap DateTime Picker in a Form Type for Symfony 3.* and ^4.0. The bundle structure is inspired by GenemuFormBundle., _(*1)

Demo : http://www.malot.fr/bootstrap-datetimepicker/demo.php, _(*2)

Please feel free to contribute, to fork, to send merge request and to create ticket., _(*3)

Installation

Step 1: Install DatetimepickerBundle

Add the following dependency to your composer.json file:, _(*4)

``` json { "require": {, <sub>(*5)</sub>

    "alexvasilyev/datetimepicker-bundle": "dev-master"
}

}, <sub>(*6)</sub>

and then run

```bash
php composer.phar update stephanecollot/datetimepicker-bundle

Step 2: Enable the bundle

Symfony 3 ``` php <?php // app/AppKernel.php, <sub>(*7)</sub>

public function registerBundles() { $bundles = array( // ... new SC\DatetimepickerBundle\SCDatetimepickerBundle(), ); }, <sub>(*8)</sub>

Symfony 4
``` php
<?php
// config/bundles.php
return [
        // ...
        SC\DatetimepickerBundle\SCDatetimepickerBundle::class => ['all' => true],
];

Symfony 3 ``` yml, <sub>(*9)</sub>

app/config/config.yml

sc_datetimepicker: picker: ~, <sub>(*10)</sub>

Symfony 4
``` yml
# config/packages/sc_datetimepicker.yaml
sc_datetimepicker:
    picker: ~

Step 3: Initialize assets

Symfony 3 ``` bash $ php app/console assets:install web/, <sub>(*11)</sub>

Symfony 4
``` bash
$ php app/console assets:install public/

Usages

``` php <?php // ... use SC\DatetimepickerBundle\Form\Type\DatetimeType;, <sub>(*12)</sub>

public function buildForm(FormBuilder $builder, array $options) { $builder // defaut options ->add('createdAt', DatetimeType::class), <sub>(*13)</sub>

    // full options
    ->add('updatedAt', DatetimeType::class, array( 'pickerOptions' =>
        array('format' => 'mm/dd/yyyy',
            'weekStart' => 0,
            'startDate' => date('m/d/Y'), //example
            'endDate' => '01/01/3000', //example
            'daysOfWeekDisabled' => '0,6', //example
            'autoclose' => false,
            'startView' => 'month',
            'minView' => 'hour',
            'maxView' => 'decade',
            'todayBtn' => false,
            'todayHighlight' => false,
            'keyboardNavigation' => true,
            'language' => 'en',
            'forceParse' => true,
            'minuteStep' => 5,
            'pickerReferer ' => 'default', //deprecated
            'pickerPosition' => 'bottom-right',
            'viewSelect' => 'hour',
            'showMeridian' => false,
            'initialDate' => date('m/d/Y', 1577836800), //example
            ))) ; 

}, <sub>(*14)</sub>

Add form_javascript and form_stylesheet

The principle is to separate the javascript, stylesheet and html.
This allows better integration of web pages.

### Example:

``` twig
{% block stylesheets %}
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" />

    {{ form_stylesheet(form) }}
{% endblock %}

{% block javascripts %}
    
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>

    {{ form_javascript(form) }}
{% endblock %}

{% block body %}

Documentation

The documentation of the datetime picker is here : http://www.malot.fr/bootstrap-datetimepicker/#options, <sub>(*15)</sub>

Notes

The date format from php 'pickerOptions' => array('format'=>'dd MM yyyy - HH:ii p') is used to set automatically the date format of Symfony in order to make compatible Symfony and JavaScript output. But there are some problems for example with php MM which display "décembre" in PHP intl translation and "Decembre" in Bootstrap translation. That is why I edited js/locales/bootstrap-datetimepicker.fr.js, <sub>(*16)</sub>