Datetimepicker Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require anh/datetimepicker-bundle
   

   Add to config/bundles.php (Symfony 4+) or AppKernel.php (Symfony 3):

   Anh\DateTimePickerBundle\AnhDateTimePickerBundle::class => ['all' => true],
   

2. Install Dependencies:

   php bin/console sp:bower:install
   

   (Note: Requires sp/bower-bundle; may need manual setup if missing.)

3. First Use Case: Extend a form type to enable a datetime picker:

   // src/Form/EventType.php
   public function buildForm(FormBuilderInterface $builder, array $options) {
       $builder->add('eventDate', DateTimeType::class, [
           'picker' => true,
           'format' => 'yyyy-MM-dd HH:mm',
       ]);
   }
   

4. Include Assets (Twig):

   {# templates/base.html.twig #}
   {% block stylesheets %}
       <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet">
       {% stylesheets '@anh_dateTimePicker_css' %}
           <link rel="stylesheet" href="{{ asset_url }}">
       {% endstylesheets %}
   {% endblock %}
   
   {% block javascripts %}
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
       <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
       {% javascripts '@anh_dateTimePicker_js' %}
           <script src="{{ asset_url }}"></script>
       {% endjavascripts %}
   {% endblock %}
   

Implementation Patterns

Common Workflows

1. Form Type Extension: Reuse the picker across projects by creating a base form type:

   // src/Form/BaseDateTimeType.php
   abstract class BaseDateTimeType extends AbstractType {
       public function buildForm(FormBuilderInterface $builder, array $options) {
           $builder->add('date', DateType::class, [
               'picker' => true,
               'format' => $options['format'] ?? 'dd.MM.yyyy',
           ]);
       }
   }
   

2. Dynamic Configuration: Use form events to adjust picker options:

   $builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) {
       $data = $event->getData();
       $event->getForm()->add('deadline', DateTimeType::class, [
           'picker' => true,
           'format' => $data->isUrgent() ? 'yyyy-MM-dd' : 'dd/MM/yyyy',
       ]);
   });
   

3. Asset Management:

   • Symfony 4+: Use webpack or encore to bundle assets instead of Bower.
   • Legacy: Cache asset URLs in Twig:

     {% set datetimepicker_js = asset('bundles/anhdatetimepicker/js/anh.datetimepicker.js') %}
     

4. Validation Integration: Ensure form field formats match validation rules:

   $builder->add('startTime', TimeType::class, [
       'picker' => true,
       'with_seconds' => true,
       'constraints' => [new Time(['message' => 'Must be after 9 AM'])]
   ]);
   

Gotchas and Tips

Pitfalls

1. Bower Dependency:

   • The bundle relies on sp/bower-bundle. If missing, manually install jQuery UI:

     bower install jquery-ui --save
     

   • Symfony 4+: Replace Bower with npm/yarn for jQuery UI:

     yarn add jquery-ui-dist
     

2. Asset Paths:

   • Hardcoded paths in the bundle may break if assets aren’t installed. Override them in Twig:

     {% set anh_dateTimePicker_js = [
         'bundles/anhdatetimepicker/js/anh.datetimepicker.js'
     ] %}
     

3. jQuery UI Version Mismatch:

   • The bundle defaults to jQuery UI 1.10.3. Conflicts may arise with newer versions. Test thoroughly.

4. Timezone Handling:

   • Picked times are client-side; ensure server-side validation accounts for timezone differences:

     $builder->add('eventTime', DateTimeType::class, [
         'picker' => true,
         'attr' => ['data-timezone' => 'UTC'],
     ]);
     

Debugging Tips

1. Console Errors:

   • Check for missing jQuery/jQuery UI:

     $0 is not defined  # jQuery not loaded
     $.datepicker is undefined  # jQuery UI missing
     

2. Picker Not Initializing:

   • Verify the picker: true option is set and assets are included after jQuery UI.

3. Format Issues:

   • Use dd.MM.yyyy (with dots) for locale-aware parsing. Avoid ambiguous formats like MM/dd/yyyy.

Extension Points

1. Custom Templates: Override the picker template:

   {# templates/AnhDateTimePicker/fields.html.twig #}
   <div class="custom-picker">
       {{ form_widget(form) }}
       <script>
           $(document).ready(function() {
               $('{{ form.vars.id }}').datetimepicker({
                   // Custom options
               });
           });
       </script>
   </div>
   

2. Event Listeners: Extend the bundle’s form type:

   // src/Form/Extension/DatetimePickerExtension.php
   public function buildForm(FormBuilderInterface $builder, array $options) {
       $builder->addEventListener(FormEvents::POST_SUBMIT, function (FormEvent $event) {
           $data = $event->getData();
           if ($data instanceof \DateTime && $data->format('H') < 9) {
               $event->getForm()->addError(new FormError('Time must be after 9 AM.'));
           }
       });
   }
   

3. Asset Overrides: Replace the bundle’s JS/CSS by copying files to your project and updating the Twig paths:

   {% set anh_dateTimePicker_js = [
       'js/custom.datetimepicker.js'
   ] %}