Date and time in Web Form Builder -...

User 46144 Photo


Registered User
12 posts

Hi,

First of all I'm not sure if I use Web Form Builder or Web Form Builder Lite:
I downloaded and installed a testversion of WFB, and then saw that there seemed to be very few differences between WFB and WFBL, so I downloaded and installed WFBL as well.
When running the program, it says WFBL though.

Now to my question:
I want to put date and time fields in my form. Doing this in the HTML Editor, writing the code myself, <Input type="date".... will give me a nice datepicker. Likewise with time, and also type="datetime-local" works as expected.

When i WFBL I can only select a date-field, and there seems to be no support for datepicker, and I can not select a time-field neither.

Trying to add an HTML-element gives me the possibility to write ordinary HTML-code. But when doing so, neither date, datetime-local or time will produce a picker - at least not in preview.
As you can see in the attachment, the WFBL adds to the HTML-code, putting </input> in three times at the end of the code I entered.

Does this mean I can forget about WFB/WFBL if pickers are essential to my design?

Would hate to miss out on all the other niceys in WFB/WFBL, but ....!

Best regards,
Steen
User 187934 Photo


Senior Advisor
20,242 posts

Hi Steen,
I think the formbuilder lite has a date picker. Remember that adding your own inputs through a HTML element wont be processed without replacing the myformname.php with a custom script, and you can't do this with any forms hosted on S-Drive. There's a work around where you can use JQuery scripts to have a time picker and then populate an input that is added through the formbuilder so it gets submitted.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 46144 Photo


Registered User
12 posts

Hi Eric,

I've read a lot of your answers in here, and there is NO DOUBT that if you need a helpfull friend with EXTENSIVE tech knowledge, you're the man! Guys like you make the world a better place, I think.

Anyhow, my issue ...

You reply that you THINK that the WFB Lite has a datepicker. Any chance you can guide me to get that one up and working, simply selecting it in WFBL? I haven't found it yet, nor in the documentation.

And what about a field of type Time? Can't find that either, be that with or without a picker.

Your suggestion for a workaround - though much appreciated - makes no sense to me. But then I'm perhaps not the most tech experienced guy. I recognize trying to find a way around a problem, but I'd LOVE to have WFBL work Common off the shelf to give me a form like I could get it if doing the form by hand in the HTML editor.
(see attached screendump from the HTML Editor. The code there works perfectly in preview).

So before considering your workaround suggestions, can you tell me if (and how) I can select a datefield in WFBL with a datepicker and a timefield with a timepicker.

Thank you.
Best regards,
Steen
Attachments:
User 187934 Photo


Senior Advisor
20,242 posts

I just downloaded the lite version and the date picker is there under the Magical elements. It says Date.
The problem with using a time input is that not all browsers support it so you need to use a time picker.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 46144 Photo


Registered User
12 posts

Hi Eric,

I stand corrected, as you are right. Once you put your cursor in the date field in the form built in WFBL, there is a date picker.

Reason why I never clicked in the field previously is that the field is empty.

When creating a form and date-fields and time-fields using the CC HTML Edtior, fields are pre-filled with dd-mm-åååå (dd-mm-yyyy in english), and clicking a date-field will display a datepicker. So I never thought it worked, and thus never selected the field. Sorry.

And as you can see in the attached screen dump, adding a time-field using HTML in WFBL will enable a "time picker" (--:--)

Only surprise is that in WFBL you only can select a 2 digit year in the date format, but that the date is displayed with a 4 digit year once a date is picked.

Do you know if it is possible to change language for the date picker in WFBL? Right now it is in english (tried to change the time zone in the setup options, but that didn't change anything). When using the HTML Editor, both the pre-filled date-format and the date picker is in danish without me having defined anything in the HTML-Code (month names and day names).

Best regards,
Steen

Attachments:
User 187934 Photo


Senior Advisor
20,242 posts

Yes you can change the language.
http://www.coffeecup.com/forums/web-for … post263544
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2982483 Photo


Registered User
43 posts

Hi, old feed I know but how can I get the time picker in my form.

Thanks for any help.
User 187934 Photo


Senior Advisor
20,242 posts

Hi Kirby,
Is this what you need? It can be customized.
https://ericrohloff.com/coffeecup/ccfor … me-picker/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2982483 Photo


Registered User
43 posts

Hey Eric, yes that's exactly what I need. How do we make it happen.

Thanks and much appreciated.
User 187934 Photo


Senior Advisor
20,242 posts

Go Here and download the files. Link is in upper right corner.
https://www.jonthornton.com/jquery-timepicker/
Unzip and add them to a directory named jquery-timpicker in the formname/ directory
Place this code in the head area of your formname.html.
Use a text type input in the form builder for your time picker.
Adjust the script at input[name='time'] to your input name.
<link rel="stylesheet" href="jquery-timepicker/jquery.timepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="jquery-timepicker/jquery.timepicker.js"></script>
<script>
var jQ = $.noConflict(true);
jQ(function() {
// Adjust this input name
jQ("input[name='time']").timepicker({
'step': 1,
'timeFormat': 'H:i:s',
'scrollDefault': 'now'
});
});
</script>

Make sure your file names match those in the script or change them in the script. That also applies to the file locations.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.