Streaming live at 10am (PST)

Need help implementing jQuery plugin

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

Hi @Joshua_Suntup

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:

  1. 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>

  2. open the page settings for your page and go to the “custom code” section

  3. 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" />

  4. 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!

1 Like

Find the best date pickers

  1. https://bbbootstrap.com/snippets/default-datepicker-16487400
  2. https://bbbootstrap.com/snippets/basic-clockpicker-81609682
  3. https://bbbootstrap.com/snippets/datepicker-using-html-and-jquery-plugin-35354562

Bootstrap date and time picker