Easyadminbundle: [RFC] Integrating a datepicker

[javiereguiluz]

Following our recent efforts to integrate a WYSIWYG editor and a file uploader, I want to integrate next a fully-featured datepicker for date/time/datetime form fields.

These are my questions:

• Is there a Symfony bundle that we could use for this? If there are several, which one is the best for us?
• Should we integrate instead a raw JavaScript library (e.g. a jQuery plugin)?
• How should we implement this feature? Forcing the user to use a specific form type? Adding a configuration option for the property?

If you have experience with Symfony + JavaScript date pickers, please add your comments. Thanks!

[mkalisz77]

I like this one:
http://eonasdan.github.io/bootstrap-datetimepicker/

[rubengc]

I do not understand why anyone will want merge javascript with php

If I want implement ckeditor or summernote or a datepicker or any component from javascript, I will add a contructor based on their class (like .ckeditor or .editor) in my javascript files

Really is necessary add a bundle for a simple component?

I think will be more important the coverage to more complex bundles (fosuser, phpcr, etc)

Select2 is different, he covers a common needle that you can't cover by any html5 component and is excellent to cover relationships

[Pierstoval]

@rubengc : it's more about providing cool cookbooks to easily integrate third-party bundles without having us to develop our own system, like for CKEditor or FOSUserBundle, which are not implemented, but just proposed as the easiest integration. If a bundle exists that provides cool datepickers like IvoryCKEditorBundle provides cool WYSIWYG in 5 minutes, then it should be presented as a proposal, not a requirement.

If there's no bundle for the bootstrap datetimepicker, I propose to create an open-source bundle dedicated to this, and maintain it separately from EasyAdmin :)

[Pierstoval]

Aaand I found one: https://github.com/stephanecollot/DatetimepickerBundle

[jokari4242]

Hello;

I have add the DateTime picker like this :

1/ Install this bundle
https://github.com/stephanecollot/DatetimepickerBundle

2/ Create a javascript file in web/js/easyAdmin.js :
$('#your_field_datetime').datetimepicker();

3/ Add this js and css in config.yml
easy_admin:
design:
assets:
js: ['bundles/scdatetimepicker/js/bootstrap-datetimepicker.min.js', 'js/easyAdmin.js']
css: ['bundles/scdatetimepicker/css/datetimepicker.css']

But i think it's not the best solution !

[Pierstoval]

@jokari4242 You're right, the best solution would be to load automatically an asset once and for all _only_ when there's at least one field using a datepicker, pretty much like what IvoryCKEditorBundle does with the CKEditor javascripts.

[mkalisz77]

There is also possibility to implement DatePicker using FormType. I have custom template with JQuery UI. JQuery UI have custom datepicker (https://jqueryui.com/datepicker/). So I integrate it using custom FormType

<?php

namespace AppBundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\DateType;

class DatePickerType extends AbstractType
{
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array('widget' => 'single_text'
                                    ,'format' => 'dd/MM/yyyy'
                                    ,'attr' => array('class'=>'datepicker'
                                                    ,'data-dateformat'=>'dd/mm/yy'
                                                    ,'placeholder'=>'Select a date'
                                                    )
                                    )
                              );
    }

    public function getParent()
    {
        return DateType::class;
    }
}           

and in config file

                    - { property: 'event_date', label: 'db.event.date', type: 'AppBundle\Form\Type\DatePickerType' }    

It works very well

I initialize this using example from JQuery UI:
$(function() {
$( "#datepicker" ).datepicker();
});

[mkalisz77]

Also it probably will be possible to implement using type_options in config file but if you have many datepicker fields this way is not so nice as solution with custom FormType.

[Pierstoval]

Still, I think EasyAdmin cannot do much things about this, because there are tons of ways to implement date pickers, and if you want one for your locale, you may want many different ones...

[yceruto]

@mkalisz77 That happens with all your custom form types for known fields types.

One option could be to create a Custom Type Guesser for your DateType but currently EasyAdmin predefines the form type for each known field before, so any guesser isn't trigger to resolve this form type, then we discard this option.

So, the solution would be to Create a Form Type Extension for Symfony\Component\Form\Extension\Core\Type\DateType. Move all your logic from DatePickerType to new "DateTypeExtension".

[mkalisz77]

Form Type Extension is a very nice way but I can add in config: type: 'AppBundle\Form\TypeDatePickerType' for all date fields. For me it is OK, not to many configuration and it works.

[rubengc]

@javiereguiluz a posible solution could be:

1 - Add a datepicker extension (I vote for a raw jquery library and support it by default not a bundle)
2 - Like select2, match everything with data-widget="datepicker" and initialize the plugin (More simple than a custom form type)

[javiereguiluz]

Thank you all for the discussion. This is not easy to solve (add a datepicker? integrate a existing one? do nothing but provide auto-configuration for popular datepickers? rely on HTML5 built-in datepickers?) So I'm closing this issue for now and moving it to the list of future features of this bundle to revisit it in the near future. Thanks!

[javiereguiluz]

Just for the record: Firefox 57 adds a native date/time picker for <input type="date" />.

It looks great, it works perfectly and it requires zero effort on our side ... so I wish other browsers follow soon. See https://hacks.mozilla.org/2017/09/firefox-quantum-developer-edition-fastest-firefox-ever/

[Pierstoval]

Actually, latest Chrome versions also do integrate this kind of datepicker :)

[shakaran]

Please consider reopen this and don't leave it for months/years in the bag of "future ideas to implement".

In my opinion this feature is a must and it should have more priority. I have clients complaining about the way that datetime fields are displayed and I have to hardcode every field with datetime creating the custom code for each field.

Please put more priority at this. A simple addition like select2 as data-widget="datepicker" will solve all this issue quickly.

For example I am using in edit.html.twig template a simple way to add this like the select2:

 {{ include('@EasyAdmin/default/includes/_select2_widget.html.twig') }}

But for datepicker:

 {{ include('@EasyAdmin/default/includes/_datepicker_widget.html.twig') }}

This is the template that I use:

#Resources/default/includes/_datepicker_widget.html.twig
{% set _datepicker_locales = ['ar', 'az', 'bg', 'ca', 'cs', 'da', 'de', 'el', 'en', 'es', 'et', 'eu', 'fa', 'fi', 'fr', 'gl', 'he', 'hi', 'hr', 'hu', 'id', 'is', 'it', 'ja', 'km', 'ko', 'lt', 'lv', 'mk', 'ms', 'nb', 'nl', 'pl', 'pt-BR', 'pt', 'ro', 'ru', 'sk', 'sr-Cyrl', 'sr', 'sv', 'th', 'tr', 'uk', 'vi', 'zh-CN', 'zh-TW'] %}
{% set _app_language = app.request.locale|split('-')|first|split('_')|first %}
{% set _datepicker_locale = app.request.locale in _datepicker_locales
    ? app.request.locale
    : _app_language in _datepicker_locales ? _app_language : 'en'
%}

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/locale/{{ _datepicker_locale }}.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.{{ _datepicker_locale }}.min.js"></script>

<script type="text/javascript">
$(function() {
    // datepicker widget is only enabled for the <input> elements which
    // explicitly ask for it
    $('#main').find('form input[data-widget="datepicker"]').datepicker({
        language: '{{ _datepicker_locale }}',

        /* Other options that could be added via parameters
        locale: {{ _datepicker_locale }},
        format: "mm/dd/yyyy",
        clearBtn: true,
        autoclose: true,
        todayBtn: 'true',
        todayHighlight: 'true',
        weekStart: 1,
        */
    });
});
</script>

The as suggested above, I have a type form defined (this is using spanish format, it should take from parameters the locale format date and others from easyadmin:

<?php

namespace AppBundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\DateType;

class DatePickerType extends AbstractType
{
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array('widget' => 'single_text'
                                    ,'format' => 'dd/MM/yyyy'
                                    ,'attr' => [
                                        'class'=>'datepicker',
                                        'data-dateformat'=>'dd/mm/yy',
                                        'data-widget' => "datepicker",
                                        'data-provide' => "datepicker",
                                                    ]
                                    )
                              );
    }

    public function getParent()
    {
        return DateType::class;
    }
}       

Then in easyadmin.yml I define the field like:

- { property: 'creationDate', label: 'Creation date', type: 'AppBundle\Form\Type\DatePickerType', format: 'd-m-Y h:i:s' }`

Note that format is used for display as text in lis option or as string (not edit which it will be displayed as datepicker)

[Pierstoval]

Please put more priority at this. A simple addition like select2 as data-widget="datepicker" will solve all this issue quickly.

With this simple phrase you solved this issue, there's no need to add overhead to EasyAdmin with a feature that can be built in browsers

EDIT:
And by the way, nothing prevents you to createa custom DateType that will simply add this data-widget option and customize rendering like IvoryCKEditorBundle does when it automatically adds the <script> tag if not loaded already.

[shakaran]

@Pierstoval following your reasoning, why is added as default select2 widget if the "select" native html is built from browsers already? It is the same reason like easyadmin needs a better widget for dates.

The native html5 datepicker don't offer probably the amount of customization and integration that bootstrap datepicker (at least without a lot effort). Plus, I think that this simple feature don't overhead at all the bundle unless that you have a form with 100 datepickers, which is pretty weird.

About the DateType, I could customize as much I can of course, the thing is provide by default in this automatic entity generator, because when someone use this easyadmin panel, at least in my opinion, they expect a nice gui and easy and don't override or built a lot things just for display a datepicker.

[Pierstoval]

@shakaran The <select> native html doesn't include any kind of search engine or UI that highly helps using it. That's why select2 was chosen in the first place.

A datepicker is a datepicker, and native ones include what we already need, the same as what jQueryUI or others include, minus the design, which is useless for mobiles for example that will use their native features to select a date.
If you need additional features like "before or after date" or others, then native EasyAdmin integration would not add any benefit other than writing a few lines of code for you which you can optimize yourself (adding JS to a web-page is enough overhead, no need to add more just for one line of code in a form type and/or a template).

EasyAdmin already has bridges for CKEditor and VichUploader, but only because they already provide big customizing features. And each have their own options, and all we do with our backends is add a simple reference to these (by using native Form component features, a.k.a "form options" under the form_options field option). As said before: a one-liner that refers to a complete other feature, light coupling, cool maintenance.

If there's a "DatePickerBundle" available somewhere which is enough "trustable", maybe EasyAdmin may provide a bridge for it (like transforming all "DateType" into datepickers if the bundle is available).

As @javiereguiluz said years ago when creating this bundle, it's not meant to "do everything for you", but more "allow you to do everything easily", which is a very different point of view.

I think one could copy/paste the contents of egeloen/IvoryCKEditorBundle and replace any reference to "CKEditor" with a reference to "jQueryUI" for instance, and make jQueryUI downloadable via a command, customizable with a few configuration options, etc.

No big deal in terms of feature, but it has to be done if there's really big needs for this kind of stuff.

[recrsn]

IMO it makes more sense to default to html5 date/time types by default. Even Symfony form components have gained the support. Newer custom widget libraries also are starting to use the html5 date/time field for backing store. It will be easy to initialize such libs with injected JS

[seb-jean]

It would be great to integrate a datepicker to this bundle :)

[wapcrazut]

I wanted to point out that actual versions of Symfony supports rendering the native HTML5 datepicker, you only need to define a new type:

namespace App\Form;


use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\DateType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class DatePickerType extends AbstractType
{

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'widget' => 'single_text',
            'format' => 'yyyy-MM-dd',
            'html5' => true,
        ]);
    }

    public function getParent()
    {
        return DateType::class;
    }

}

And use it:

- { property: 'dateStart', type: 'App\Form\DatePickerType'}

Please take a look to the DateType field documentation: https://symfony.com/doc/current/reference/forms/types/date.html

[Pictor13]

Just a mention for eventual future integrations.
We used a custom datepicker in our Honeybee CMF; it served us well with a high degree of precision in the last years. You can take a look at it, or maybe use it for a DatePicker bundle.