javascript - How to display a datepicker on Symfony? - Stack Overflow

admin管理员组

文章数量:1278792

I want to set up a date-picker for my date type fields based on symfony documentation. I have installed the package since packagist 'eternicode / bootstrap-datepicker'. I am able to apply my defined conditions for entering the date field in my js (like the date format) but the display is still impossible. I do not have an error message in my js console. I don't even see the datepikcer ponent..

My Form Type:

   ->add('date_entree', DateType::class, [ 
                'widget' => 'single_text',
                          'html5' => false,
                          'attr' => ['class' => 'js-datepicker'],
                ])

My JS:

    $(document).on('ready', function() {
         $('.js-datepicker').datepicker({
              format: 'dd-mm-yyyy',
         });
     });

Have you please an idea about this issue?

I want to set up a date-picker for my date type fields based on symfony documentation. I have installed the package since packagist 'eternicode / bootstrap-datepicker'. I am able to apply my defined conditions for entering the date field in my js (like the date format) but the display is still impossible. I do not have an error message in my js console. I don't even see the datepikcer ponent..

My Form Type:

   ->add('date_entree', DateType::class, [ 
                'widget' => 'single_text',
                          'html5' => false,
                          'attr' => ['class' => 'js-datepicker'],
                ])

My JS:

    $(document).on('ready', function() {
         $('.js-datepicker').datepicker({
              format: 'dd-mm-yyyy',
         });
     });

Have you please an idea about this issue?

• javascript
• symfony
• symfony4
• symfony-forms

Share Improve this question Follow edited Oct 24, 2019 at 16:01 MSK90 asked Oct 24, 2019 at 15:50 MSK90MSK90 15111 silver badge88 bronze badges 5

• I cannot tell you anything about potential JavaScript mistakes you may have made, but you for sure need to make sure that the Form ponent uses the same format as the datepicker when populating the form. For that, you will have to take a look at the format option of the DateType. – xabbuh Commented Oct 24, 2019 at 20:12
• Thanks for your reply. For DateType, I put use \Symfony\Component\Form\Extension\Core\Type\DateType as DateType; – MSK90 Commented Oct 25, 2019 at 12:35
• But you are still not using the format option (or you forgot to update the description after changing your code). – xabbuh Commented Oct 26, 2019 at 7:03
• ->add('date_entree', DateType::class, [ 'format' => 'dd-mm-yyyy', 'widget' => 'single_text', 'html5' => false, 'attr' => ['class' => 'js-datepicker'], ]) symfony./doc/current/reference/forms/types/date.html#format – Frank B Commented Oct 26, 2019 at 13:27
• This will not resolve my problem. I want to personalize my code from my js-datepicker class because it contains a lot of options. (for example, I want to set a start time in my calendar so the user can choose a date from this date) – MSK90 Commented Oct 28, 2019 at 8:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Thank you for your help.

Finally, this was my solution:

• css:

   < link href="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
  

• JS

          <script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
      <script>
          $(document).ready(function() {
              // you may need to change this code if you are not using Bootstrap Datepicker
              $('.js-datepicker').datepicker({
                  format: 'yyyy-mm-dd'
              });
          });
      </script>
  

• Form Type

     ->add('date_entree', DateType::class, [ 
          'widget' => 'single_text',
                    'html5' => false,
                    'attr' => ['class' => 'js-datepicker'],
          ])
  

Hope that will be helpful for others developers!

本文标签： javascriptHow to display a datepicker on SymfonyStack Overflow