Streaming live at 10am (PST)

Date Time picker in a form

Hello,
I have a Webflow form that takes contact information. I would like to add the ability to pick a date and time in the form as an appointment time. The date/time picker (https://university.webflow.com/article/date-time-field) seems to be a CMS collection item. My page does not have any CMS need. It is a simple form.

Could you please suggest a way to collect forward looking date and time on a form? Sincerely appreciate any help.

Thanks!
Jake

If you want a date time picker widget bound to a I put field then you might want to consider using this one that’s designed for jQuery since it is loaded on all WF projects. It’s a simple plugin that is easy to implement as far as custom code goes.

1 Like

Hello Jake.

mattvaru Gave a simple solution to this task using flatpickr.
Clone link: https://webflow.com/website/integrating-flatpicker-js

All you need to do is create a text field, add class name “date” and add this code inside the tag.2020-05-16 19_00_38-Skype

You can use any method. I gave you one of the possible ones, where everything is ready inside Webflow.

This is amazing. I’ve been trying to figure out a solid solution and this works really well, as I was able to implement without personally knowing much about JS.

In my example (haven’t really fine tuned it yet) I’m capturing 3 dates and a corresponding time. Here you can see I’ve disabled the selection of Saturday and Sunday, while the soonest date is available is 3-days from today.

Screen Shot 2020-10-17 at 1.15.29 PM

1 Like

I’m trying to get this implemented on my site as well. How were you able to block out the weekend dates?

Thanks,
John

Blocked off with some JS - it definitely requires custom code.

Late to the conversation, but do you know if there’s a way of changing the language of the date picker? Would love to be able for months and weekdays to be displayed in German (or any other language for that purpose).

Thanks! :blush: