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

Hello everybody

Is there a solution to this problem?
Also wanted to insert two date pickers into my form. The first field works, the selection opens, but when I click on the second field it doesn’t happen. No window opens.
I tested it both locally and on the server.

I managed to get it to work somehow after various attempts but I still have the colour issue that would be nice to sort out. There is never a problem when adding one date picker bric, but two does seem to create conflicts.

What exactly did you do that you can use two in the same form.
Do you have a sample file?

From memory I simply removed one or both and tried again various times until it somehow worked. I’ll try to prepare a bloc that you can then import and edit as needed.

great thank you

Hello,

if you prepare an url with the problem, I can have a look in 1-2 weeks. I could never reproduce this problem, so please send me an url where the problem occurs, so that I can have a look. Thanks.

OK I managed to have it work first time this go, however I am still unable to have more than one date picker with the dark theme.

Attached as both a project and a custom bloc.

date-picker.bloc (301.0 KB)

Two Date Picker.zip (27.6 KB)

2 Likes