Calendar/date/time picker element for forms/widgets

Hello,

I’m fairly new to Webflow and am really digging it!

I’m hoping to find a suggestion on how to implement a time and date picker within my site. Something like:

(preferably something with a time picker incorporated also)

I’ve read in other posts on the forum that users have attempted to use JQuery and custom code to accomplish this, but I’m unsure of how/where to implement this. I’m assuming there should be a mix of embed code and custom code, but I’m unsure where to start.

Any help and/or suggestions would be appreciated.

Thanks!

mrHunt

I asked something like this yesterday, also would like to know. I did something with tabs and forms (tabs for days of the months, and in each tab a form to choose hours). I will show you when im done.

Yo can see it in webdivan.webflow.com/psi2

But im open to suggestions this took a lot of time.

I was able to correctly insert an inline date picker with JQuery based on this…

In the before < /body > tag:

<meta charset="utf-8">
  <title>jQuery UI Datepicker - Populate alternate field</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      altField: "#DatepickerBox2"  ,
      altFormat: "DD, d MM, yy"
    });
  });
  </script>

In the embed code:

<div id="datepicker"></div>

Finally, give your text field the Unique ID: DatepickerBox2

Still trying to implement a solid Timepicker. I’d like to use this one…

https://fgelinas.com/code/timepicker/

…but I can’t seem to make it work…

Any help out there???

Thanks,

mrHunt

1 Like

not working for me.

When I add the embed widget…
I get this in the code

Do You Service On A Specific Date / Time

I cannot drag the textbox into the embed code either.

https://webflow.com/design/rev-test-02?preview=e7b77d5dee14ca5f9723aecbbb60ab63

http://businesswebsites.info/

old topic but i did get a jquery time / date picker working
tell me if you need the code

just wanted to add
it’s an amazing world when i can sit here
in the middle of the blue ridge mountains on vacation
building a responsive website on a surface pro 3…
and getting paid for it.

gotta love it.

3 Likes

hi revolution,

i am new to webflow and need a seperate date- and timepicker. You want to share your knowledge?

thank you in advance

Hi guys, same idea here! So Please Webflow, add a “Date” Type to the form!

1 Like

Hi Dave,

Just wondering where Webflow is at implementing the booking/availability calendar widget?

1 Like

Hi @OurLocalMarkets, it is an awesome idea for a widget, likely appreciated by a lot of people :slight_smile: I do not have a timeline yet, but once there is action on this, there will be an update.

3 Likes

Ohhh please do this, a good calendar/date picker would make my life and lots of others sooooo much easier. DO IT DO IT DO IT :slight_smile:

3 Likes

hey @Revolution could you share your knowledge please? :relaxed:

1 Like

I’m also very interested on this. Is there a plan for adding a calendar option to a form?
Please do it soon :smile:

1 Like
  • 1!

Also very interested in a calender feature.

1 Like

Hey! My name is Ben and I help with product research here at Webflow. For the last few weeks I have been looking at ways to improve forms. Please help us by filling out this quick survey:

Thank you for your input!

2 Likes

First off! Webflows my go to! i love it!!! But I feel like this is something that should almost be mandatory! I build websites for all kinds of clients that offer services that require dates. A calendar time picker would be F*cking Amazing!

Please Webflow, the amount of time it would take you to do this VS the amount of happy customers would be so worth the 5 hours it would probably take one of your web engineers to do. lol please. do this!

3 Likes

@thewonglv Any news on these matter?

I’m also interested in this feature, and I thinks it’s a crucial thing for Travel and Tour Agencies.

I also thinks this has to be combined with the Collaborator’s ability to set no available (clickable for the user) date/time gaps.

1 Like

That’s exactly what I was looking for! Does anyone know how to make one like that, where someone in the CMS could edit which days are available.

Thanks!

I did one awhile ago… will see if I can find it.

Here’s a demo of the JQuery UI Date Picker