Obviously, I’m doing something wrong.
I cannot get the input field to be embedded into embed widget.
This is convert a input field into a jquery date picker.
See Video
http://quick.as/WAJ7iyXb
Public Link
https://webflow.com/design/rev-test-02?preview=e7b77d5dee14ca5f9723aecbbb60ab63
Hi @Revolution
First of all, move your script from <head> to before </body> field. Right below the script tags of jQueryUI. Secondly, you will not be able to see the result in design mode. It doesn’t load any scripts from the site dashboard. Publish your website and see the result there. Post it here so we can take a look at it as well :)
thanks… that put me one step closer.
The calendar is actually appearing and is tied to the input field…
but it’s available immediately on page load… not on the input field mouse click
Public Link:
https://webflow.com/design/rev-test-02?preview=e7b77d5dee14ca5f9723aecbbb60ab63
You cannot it see in the Preview though.
Only way to see it is on the Live site.
Live: http://businesswebsites.info
$(document).ready(function() {
$('#DatepickerBox2').css('display', 'none');
$('#DatepickerBox2').click(function() {
$('#datepicker').toggle();
});
});
Try this one.
Thanks @bartekkustra. Used your example and got it to “partially” work.
The example in this thread… did not work for for me.
Basically… in the above example… you place code in the custom code (head) area
<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>
<script>
$(function() {
$( "#datepicker" ).datepicker({
altField: "#DatepickerBox2" ,
altFormat: "DD, d MM, yy"
});
});
</script>
Add an Embedded Element to the form… and use this code in the element
<div id="datepicker"></div>
And this where I got confused…
Part of the problem here is.… WebFlow adds a JQUERY call at the very bottom near the /BODY tag.
And the example code adds an extra JQUERY LOAD to the top. This creates a conflict.
To remove the conflict…you have to remove the non-webflow jquery call.
But then this creates an issue - in that now JQUERY-UI is called before JQUERY.
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
This is why you have to move the JQUERY-UI call to the bottom - below the JQUERY call.
Again… the above DID NOT WORK for me.
I used @bartekkustra suggestion and modified it a little.
What I came up with is this… and it works.
Custom Code: (Head) add this:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
Custom Code: (/body)… add this:
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$( "#datepick-res" ).datepicker();
});
</script>
Add an Embedded Element to the form… and use this code in the element
<div id="datepicker">
<input class="w-input" id="datepick-res" type="text" placeholder="Select Date" name="field" required="required">
</div>
This creates an element that appears on the screen… which looks like the text / input element.
The ID (datepick-res") ties the element back to the js script.
You can call it anything you want… just make sure the 2 instances are the same.
You can also additional date picker fields… just give 2 instances of a different name - and of course update the necessary script / function.
You can achieve that embedded code by simply using webflow elements. That should give you more control over the input field. See video I did for you :)
I agree. That is a better way. Thanks @bartekkustra 
For those wanting to know “the better way”… here it is:
Add an input element onto your form.
Give it a unique ID… in this case “datepick-res”.
In your Dashboard… Custom Code Head - add this:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
In Custom Code - Body - add this: (this is the un-minified version)
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$( "#datepick-res" ).datepicker();
});
</script>
That’s it… no HTML Embed Element needed
is there a way to do a date range? My husband is a personal chef and we want perspective clients to be able to request a multi date range
I use 2 date pickers for a date range. Start Date / End Date.
Make sure the ID’s are different.
I’ve tried to get this working and it’s driving me crazy!
The input field works for a few seconds when the page first loads, and I can get the datepicker to appear, but it appears as if something else then loads on the page and then the field stops working altogether. No matter what i do after that, clicking does nothing…
Here’s my public link. https://preview.webflow.com/preview/geelong-nannies?preview=f255fe6e729dc77d1a4fe6dc9bda0b7f
I realise that the Webflow CMS has a datepicker now, but i cant charge my client for that alone. Any help would be greatly appreciated!
EDIT I forgot to mention the page is TEST DATE FORM - the Employment link will take you there 
Ok - it seems that when you publish, the new Webflow EDITOR script loads -and promptly breaks the Jquery plugin from working…might have to post that to the correct forum!
Here’s an update to the JQuery UI Date Picker I did a while back.