Datetimepicker + Datepicker + Timepicker

[bierdok]

Hi,

I found a widget for date fields, time and datetime. It would be really cool to have it by default.

https://github.com/Eonasdan/bootstrap-datetimepicker

I definitely suggest a file fields.html.twig soon as possible ...

[sstok]

:+1:

Edit. Stupid keyboard.

This looks really nice, but I noticed there are some accessibility issues (not navigable using the keyboard). Can you try to resolve those?

I found an (really) old example making this possible. http://hanshillen.github.io/jqtest/#goto_slider

[bierdok]

This task will require too much time. I'm going to ask them about it.

It's amazing that all browsers do not yet support this functionality natively... http://www.w3schools.com/html/html5_form_input_types.asp

[phiamo]

these are really cool, a new field type extension extending datetime should give us everything we need

[peshi]

datepicker http://eternicode.github.io/bootstrap-datepicker/ support for keyboard navigation

datetimepicker a datetimepicker i'm currently using is http://www.malot.fr/bootstrap-datetimepicker/ examples for bs3 available support for keyboard navigation

timepicker http://jdewit.github.io/bootstrap-timepicker/

alt. clockface http://vitalets.github.io/clockface/ -1

[phiamo]

nice @peshi can you post an example of howto include it correctly? and does one have to do any more than include js and css and display a datetime field as input somehow?

[peshi]

@phiamo - That's correct, only js and css is needed, here's an example of how it could look like.

        $builder->add('deliveryTime', 'datetime', array(
            'label' => 'Delivery time',
            'required' => false,
            'widget_addon_prepend' => array(
               'icon' => 'calendar',
            ),
            'horizontal_label_class' => 'col-md-2',
            'horizontal_input_wrapper_class' => 'col-md-4',
            'widget' => 'single_text',
            'format' => 'yyyy-MM-dd HH:mm',
            'data' => new \DateTime('now'),
        ));

JS:

    $('#someId_deliveryTime').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        autoclose: true,
        pickerPosition: 'bottom-left'
    });

[bierdok]

Or by extending the "form_div_layout.html.twig" template like this.

{% block date_widget %}
    {% if widget == 'single_text' %}
        {% if provider is defined and provider == 'datepicker' %}
            {% set attr = attr|merge({'class': attr.class|default('') ~ ' form-control'}) %}
            <div data-provider="datepicker" class="input-group col-lg-9">
                <input class="form-control" data-format="{{ format }}" value="{{ value }}" {{ block('widget_attributes') }} type="text" autocomplete="off">
                <span class="input-group-addon">
                    <span class="glyphicon-calendar glyphicon"></span>
                </span>
            </div>
        {% else %}
            {{ block('form_widget_simple') }}
        {% endif %}
    {% else %}
        {% set attr = attr|merge({'class': attr.class|default('inline')}) %}
        {{ date_pattern|replace({
        '{{ year }}':  form_widget(form.year, {'attr': {'class': attr.widget_class|default('') ~ ''}, 'horizontal_input_wrapper_class': horizontal_input_wrapper_class|default('col-lg-3')}),
        '{{ month }}': form_widget(form.month, {'attr': {'class': attr.widget_class|default('') ~ ''}, 'horizontal_input_wrapper_class': horizontal_input_wrapper_class|default('col-lg-3')}),
        '{{ day }}':   form_widget(form.day, {'attr': {'class': attr.widget_class|default('') ~ ''}, 'horizontal_input_wrapper_class': horizontal_input_wrapper_class|default('col-lg-3')}),
        })|raw }}
        {{ block('help') }}
    {% endif %}
{% endblock date_widget %}

By updating the type extension "DateTypeExtension.php" and the javascript.

The building form is more naturally and easily.

$builder->add('publishedOn', null, array(
    'label' => $this->translator->trans('book.publishedOn'),
    'widget' => 'single_text',
    'format' => $this->translator->trans('date.format'),
    'attr' => array(
        'data-provider' => 'datepicker',
        'placeholder' => $this->translator->trans('date.placeholder')
    )
));

It would be nice to have the same thing for datetime and time types.

[bierdok]

Where "DateTypeExtension.php" is declared as a service.

services:
    core.form.type_extension.date:
        class: %core.form.type_extension.date.class%
        tags:
          -  { name: form.type_extension, alias: date }

use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;

class DateTypeExtension extends AbstractTypeExtension
{
    public function finishView(FormView $view, FormInterface $form, array $options)
    {
        if (
            isset($options['attr']['data-provider'])
            && $options['attr']['data-provider'] == 'datepicker'
        ) {
            $view->vars['provider'] = 'datepicker';
            unset($view->vars['attr']['data-provider']);
        }
        if ('single_text' === $options['widget']) {
            $view->vars['format'] = $options['format'];
        }
    }

    public function getExtendedType()
    {
        return 'date';
    }
}

The javascript if we use the following plugin. https://github.com/Eonasdan/bootstrap-datetimepicker

$(function () {
    $('[data-provider="datepicker"]').datetimepicker({
        pickTime: false
    });
});

[phiamo]

would you create a PR?

[bierdok]

expected, as soon as I have some time :+1:

[bierdok]

@peshi i will use your find http://www.malot.fr/bootstrap-datetimepicker/

no intl date format on server side needed and keyboard support :+1:

for information, the method to convert the default value on init is "setValue".

example

    $('[data-provider="datepicker"]').datetimepicker({
        language: 'fr',
        format: 'dd/mm/yyyy',
        autoclose: 1,
        startView: 2,
        minView: 2,
        pickerPosition: 'bottom-left'
    }).datetimepicker('setValue');

[bierdok]

very nice js plugin...

[bierdok]

PR : https://github.com/phiamo/MopaBootstrapBundle/pull/669