Two date pickers in a form

I need to build a booking form for a client who wants to rent out trailers and he would like clients to pick a start date with one pop up date picker, then an end date with a second pop up picker. It does not seem possible to add two date pickers inside a single form, because the second remains like a normal text entry field.

Has anybody had any luck adding two date picker brics in a form? @Norm @webplus

1 Like

OK I seem to have got there, but it was really fiddly. Not sure why. I’ll have to test it on the server, but it works now inside Blocs.

1 Like

Hi @Flashman

Would be nice if you could share your solution.

MDS

I wish I knew the solution. For a while it didn’t work and then eventually it did, but then I couldn’t get it to work in a second form on the same page.

To obtain accurate spacing in the form I was duplicating an existing div, then removing the standard field content and adding the date picker. This worked fine while there was only one date picker bric in the form, but then became very fiddly once there were two.

I’ve tested this on the server and it seems to work, but there are two oddities. First the email comes through saying:

Dateinputfield_Start: 10.08.2019
Dateinputfield_End: 16.08.2019

I added the _start and _end bits, but there is no way I can see of removing the Dateinputfield entry.

Secondly it doesn’t seem to make any difference if I choose dark or light theme. The background is always white. Again I think the use of two brics in a single form is creating conflicts.

Hi @Flashman many thanks for the explanation.

I will check later today if I can find a solution for you.

MDS

1 Like

In theory it shouldn’t be a problem, unless having two in the same area causes some kind of script conflict. This might be something that @webplus is best placed to know about. It’s a fantastically useful bric to use in forms and this is the second site recently where I have used it.

1 Like

Hello @Flashman, in general this should work when using different ids. I will have a look for the text in the e-mail in next days.

Hello @Flashman, only to be sure, do you entered an id here? (Please se image)

For me 2 date pickers are working fine in the same form.

Yes I put the ID there as well, but in the email that arrives it adds “Dateinputfield_” though this is not the end of the world. More strangely switching from dark theme to light and vice versa is making no difference. It always stays light.

20

@Flashman,

can you please test it once with a new project. If in a new project it works correctly, it is a CSS conflict.

It looks like a CSS issue. On the original site even changing the colour does not work and I am stuck with green. On the new site, starting with a completely blank page I still had problems though. I successfully selected grey as the colour, however dark mode was only available on the first date picker bric.

@Flashman, sorry for the late reply. Do you have a url with the site with makes problems? I do not can reproduce the problem, for me even 2 Date pickers are working fine in dark mode

Hi @webplus and @Flashman
I also test it in my project. The date picker still gray …When I change the color nothing happened …Also light or dark theme is no difference …
tom