Hi,
I am trying to implement the plugin linked below but have very little coding experience. Would really appreciate some help firstly understanding if it is possible, and if so, where to position the code to make it work.
Any help is very much appreciated!
Cheers,
Josh
Welcome to Webflow!
So what you are asking is not all to difficult. First, I would like to suggest a datepicker that I am familiar with - and it is available on all major CDN’s (like jsdelivr) - from JQuery-UI.js.
once you are at the page click on the button “View Source” it shows you the code that you need to use.
I made for you a little DEMO to show how it looks and works. (FYI - the demo only will show you the layout and the code placement etc… but if you want to see the actual datepicker working - go to this live LINK of the demo
A step by step is also simple:
put a div in the location on the page where you need the datepicker. add an HTML embed element inside of it, and paste the following code inside it:
<p>Date: <input type="text" id="datepicker"></p>
open the page settings for your page and go to the “custom code” section
In the “Inside tag” paste the following code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/themes/base/datepicker.min.css" />
in the “Before tag” paste the following code:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script> $( function() { $( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/demos/datepicker/images/calendar.gif", buttonImageOnly: true, buttonText: "Select date" }); } ); </script>
and that’s it.
NB - you won’t be able to see the results with a preview button - you must publish your page and go to the live link - you will see the results there. - that is applicable to all custom code - only visible once published!
Hope that helps!