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 (Date/time field | Webflow University) 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.
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.
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.
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! 
Any chance you have that code snippet handy for blocking off weekends and providing a rolling 3-day buffer?
Not 100% certain, but I believe most date picker will inherit language from the browser.
This works great. I have the date & time working within a given period of dates available. I do want to have a separate field for time only. Not sure how to integrate that code in. I can get each working separately but not together. Must be a syntax thing that I do not understand.
Hi, i have tried datepicker and also a simple html input and everything works fine … except on mobile browsers. The styling there is totally broken and all i have tried to style it vie CSS does not work. Anyone has an idea how to get all fields look the same?
Everything in the designer and the preview and on desktop browsers works fine, but not on mobile browsers (safari, chrome)
See it here: contact
Is it still working? 
