Creating a Date Picker Field

Hey Matias,

Well, most often when you upload an image - you save its filename, or its relative web path in DB. If it's your case - then just query all those DB entries, pass them to template and iterate over them filling in src attributes of img tags with a proper paths you have.

But if you do not store paths to images when upload them to the server, then you need to find all the image from your filesystem by yourself. Actually, it could be easily done with special libraries like Finder Component by Symfony, which is supplied with Symfony SE out of the box. In official docs you'll find many examples how to use it: https://symfony.com/doc/cur... . So in the controller, find all the images you want to render on the page with Finder, pass them to template and iterate over each file doing the same what I mention before: fill in src attributes of img tags with a proper paths. But in this case you will need to determine relative web path by yourself

Cheers!

Hey Matias Rouaux

I would believed that it should worked, but for some reason it doesn't. You may want to try passing an array to the placeholder option as mention in the docs https://symfony.com/doc/cur...
or as this guy suggest, setting up a placeholder attribute on the element https://stackoverflow.com/a...
If you are going to add it via FormType, just include it inside the "attr" array
'attr' => [
'placeholder' => 'Ingrese la fecha'
]

Cheers!

Hey @Lorena

This tutorial is pretty old, are you coding along with tutorial? I'm pretty sure that there is some version incompatibility between Bootstrap and datepicker

Cheers!

Hey Zeineb Ellili

that's odd. Can you double-check that you disabled HTML5 and the DatePicker JS library it's been loaded? Also double-check the CSS class on your form input.

Cheers!

i did disable the HTML5:

` ->add('date', DateTimeType::class,[

            'attr' => ['class' => 'form-control js-datepicker'],
            'label' => 'date de réservation',
            'required'=> false,
            'widget' =>'single_text',
           <b> 'html5' => false</b>,
            'format' => 'MM/dd/yyyy'
        ])  `

datePicker js library also loaded. :(

Ohh you're using a DateTimeType, I believe the JS library only works with a DateType input, give it a try :)

i changed it and still nothing hahah, could be possibly from my template or html code?

Hey Zeineb Ellili!

Hmmm. It sounds like there are 2 possible issues, so let's look at each, one at a time :).

First, the date picker isn't showing up when you click the field. Do you see any JavaScript errors in your console? Also, try this:

        jQuery(document).ready(function() {
            // ...
            console.log($('.js-datepicker').length)
        });

That should log a number. What is it? If it's 1, great! But if it's 0, then for some reason your js-datepicker field isn't being found.

Second, you mentioned that if you fill in the field by hand and submit, it enters null into your database. That is... odd. The DateTimeType (or DateType) should validate your input. If the format you entered is valid it would insert a date. If you enter something invalid, it should cause a validation error on that field. If you enter something crazy like "banana", what happens? Something is very odd and wrong here...

Let me know what you find out!

Cheers!

it worked! thank you guys!

Hey codercoder123123,

You probably have 2 options:

1. Tweak Datepicker config to export date in a format that is default for DateTimeType Symfony form type.

2. Keep the Datepicker format and tweak DateTimeType format to match the one from Datepicker.

See a few options that might be useful for you:
https://symfony.com/doc/cur...
https://symfony.com/doc/cur...

I hope this helps!

Hey Tomitin,

Hm, so if you do not want to show autocomplete that browsers show you - you can control it with the "autocomplete" attribute like:

<input type="text" autocomplete="off">

As soon as you set its value to "off" - browsers won't show the autocomplete for this field.

Cheers!

Hey Batcat,

Hm, probably you point to an invalid resource, could you open Google Chrome Profiler and look at Console tab. Make sure to reload the page one more time with the opened profiler. Do you have any missing resources or 404 statuses? You can also look at Network tab as well.

Cheers!

Dear Victor,

Yes I have missing resources... Here are my messages :
Erreur dans les liens source : request failed with status 404
URL de la ressource : http://localhost:8000/js/bootstrap.min.js
URL du lien source : bootstrap.min.js.map[En savoir plus]

Hey Batcat,

OK, that's something, so are you sure you have that file in web/ directory, i.e. "web/js/bootstrap.min.js" file? Probably you just forget to copy that file in the web/js/ direcotry or made a typo in filename.

Cheers!

Hey Victor,

Problem resolved, I had a mistake in my path... Yes, shame on me ^^'
Thank you for your answers and your time!

Have a nice day

Hey Batcat!

Glad you got it working, good work! And I'm happy the problem wasn't on our side.

Cheers!

Hey Sergiu P.

Yeah, you need a different plugin if you are going to work with a full dates. Thanks for sharing!

Have a nice day

Yo Tony C!

Interesting! Actually, Chrome *should* support this - http://caniuse.com/#feat=in... - but there are some other browser that don't. And even if they did, it might look a bit different :). We'll add a note!

Thanks!

Yo Macarena Paz Diaz Colomes!

It's a small thing probably! It should be jQuery - notice the capitalization - it's a little j, not a big J :). And $ and jQuery are the same thing - they both point to the exact same function.

Cheers!

Hey Jelle!

I'm guessing you forgot to import the CSS file of the datepicker library, if that's not the case, could yo show me how your script looks like ?

Have a nice day!

Hey Robertino V.!

Hmm, let's see if we can debug this nasty issue :). Ah, yep, I see it! It's really subtle! Notice that the error says that it could not load the type "Doctrine\DBAL\Types\DateType". The class you actually want is "Symfony\Component\Form\Extension\Core\Type\DateType". The problem? You probably auto-completed the wrong use statement when you were typing the class. DateType is one of those annoying classes that appears multiple times in multiple libraries. Update the use statement and you should be golden!

Cheers!

Hello Ryan,
Thank you for replying so quick, especially during Xmas holidays!
Yep, you're absolutely right, I have chosen the wrong class from the autocomplete list :-(
Those guys at PhpStorm are to blame, why didn't they made the editor guess the user's mind instead of letting him choose :-)
And of course I should really understand what the messages are saying, now that the veil lifted off my eyes it is pretty clear.
As a side note, to me the real challenge (after getting to a normal skill level) seems to be identifying which class to use and where to get it from :-(
Again, thanks for the help!
P.S. No guarantee I won't ask a naive question again.

Hey Agent,

Hm, it's weird. It works for me well. What error did you have? Actually, we use schemaless links, i.e. "//cdnjs.cloudflare.com" instead of "https://cdnjs.cloudflare.com" there, maybe that's the case. Anyway, now the best practice is *always* require assets with HTTPS protocol when it available, so well done!

Cheers!

Hey Michael,

Hahaha, you're hooked! :) Unfortunately, it's impossible with `bootstrap-datepicker` JS library. Actually, they have an issue about including time in this widget, so you can track it here: https://github.com/uxsoluti... . Or just use another JS library which support date/time picking - there're a lot of such libs on GitHub.

Cheers!

Hey mehdi!

Wow, this is tough question! My immediate reaction is this: timezone. And, unfortunately, I'm far from an expert on timezones. But, if I'm right, then probably you do *not* see this issue if you try this during the middle of the day. Am I right? Anyways, my instinct is that the data is being, for example, submitted UTC, then being converted to some other timezone (probably whatever timezone is in your php.ini). This is definitely weird & ugly, as you're trying to only deal with *dates* not times. You can play with the mode_timezone or view_timezone settings (https://symfony.com/doc/cur... to see if you can fix this. I admit, I have not seen this issue before!

Cheers!

Hey Serge,

Actually, browser does not know... Symfony does it. Well, we did "html => false" for this field in form type and that's why this field was rendered as simple "input type=text" field instead of "input type=date" HTML5 field. That's it. See option description in docs: https://symfony.com/doc/cur...

Cheers!

Right, didn't noticed that the type had changed. Thanks again!

Hey Alexey,

You're right, this JS plugin works with a simple text field.

Cheers!

Hey maxii123

Are you talking about the javascript widget ? or the default behaviour of browser ?
If option 1: I think you might forgotten to import the CSS file, can you double check it ? :)

Have a nice day!