Instructions
Last Updated 02.16.2017
Create a Project. (Enter the Webflow Designer).
Place a Section on the Work Area.
Place a Container inside the new Section.
Within the Container... add a Text Input Element.
Select the new Text Input Element.
Select the Navigator -> Settings Tab.
Enter a Unique ID for the Text Input Element.
In the above example... I used "datepicker-1".
If you need more than 1 Date Picker... create a Unique ID for each Date Picker.
ie: additional IDs could be "datepicker-2", "datepicker-3", "datepicker-4"... etc
Remember the ID(s) you chose. You will need them later.
Exit the Designer and go to Site Settings for the Project that contains the Date Picker.
Select "Custom Code".
Enter the following javascript code in the "Head Code" area.
// This loads the JQuery UI Style Sheet
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
Enter the following javascript code in the "Footer Code" area.
// This loads the JQuery UI Javascript file. Note it's 1.11.2. A newer will most likely be available.
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
// When JQuery is READY... the following elements will respond.
$(document).ready(function() {
// This attaches / connects the datepicker-1 element to the JQuery Event Loop.
$( "#datepicker-1" ).datepicker();
// If you need more than one Date Picker... add it / them here.
// (Below) the code shows two additional (commented out) date pickers
// $( "#datepicker-2" ).datepicker();
// $( "#datepicker-3" ).datepicker();
});
</script>
Remember... JQuery is will not run in Preview Mode. You must Publish or Export the Site to see JQuery in action.
