Simple Datepicker [100% Working]

Community resources Webflow Tips
1

Hello All,

I know this is something that a lot of people would like so here is my version that works. Obviously the script will only work on published sites.

Step 1:

Add this code inside the <head> tag of your custom code:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<style type="text/css">div#ui-datepicker-div.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all{z-index: 2222 !important;}</style>

Step 2:

Add this code inside the before </body> tag of your custom code:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $('#datepicker').datepicker();
  </script>

Step 3:

Firstly add an input field -

Capture

Secondly give it an ID of ‘datepicker’

Capture

That’s it, enjoy!

Edit: if you’d like to have more than one datepicker on the same page just swap the #ID in the custom code for a .class and give each input an individual ID and you should be able to have more than one. For example this is how two datepickers would look in your custom code:

Capture

Then give the input field a CSS class of ‘datepicker’ with an ID of for example datepicker_1. Then if you want to add another give it the same class name and a new unique ID for example datepicker_2.

18 Likes
2

Works perfectly, thank you!

1 Like
3

This only works if you need only ONE datepicker field on your page.

1 Like
4

Apologies @samliew,

I should have added, just take the # out and replace with a dot for class like this:

$(’.datepicker’).datepicker();

and you give each input/datepicker a unique ID to have multiples.

1 Like
5

Great little guide @kevin.fogarty!

6

Hi, i made a twist in this solution. Added possibility to different date formats, week number, week day translation, month translation and also turned of the autofill option wish is a problem with Chrome Always having the dropdown on top of the datepicker.

Do you want me to post it?

2 Likes
7

@JanneWassberg

That would be great, I’ve started a guide for this over at flowbase, so I’ll add it there!

https://webflow.com/website/Simple-Date-Picker

3 Likes
8

Thanks for that @Thomas_92!

9

Hello @JanneWassberg,

That would be great if your posted you additions to the datepicker. It would be good if any others with knowledge on how we can adjust the CSS of the calendar would share any knowledge on this.

10

Hi here is a link to my modified datepicker. It’s a project that can be cloned.

4 Likes
12

Fantastic, thank you.

13

Is there anyway you could only let users be able to select a particular time period, e.g. Only let them pick a date within a certain week

14

@Matthew_Bishop here is some information on the configuration options. In my sample there are some options regarding dates

https://api.jqueryui.com/datepicker/

2 Likes
15

Awesome @kevin.fogarty . Is it possible to customise the date picker layout with webflow? I mean background, font, controls etc?

2 Likes
16

Do you mean to have 2 copies of the script in the before tag like:

  <script>
  $('.datepicker').datepicker();
  </script>

  <script>
  $('.datepicker').datepicker2();
  </script>

or

2 date-picker IDs within the same script, like:

$(“#datepicker, #datepicker2”).datepicker({});

or neither of the above? :blush:

1 Like
17

Hi @Dorian_Harris,

Sorry it’s been a while since I looked at this. You just do it like this:

<script>
  $('.datepicker, .datepicker-2, .datepicker-3').datepicker();
  </script>

Then just give each one it’s ID for example datepicker, datepicker-2 or datepicker-3

Hope this helps

18

Thank you, @kevin.fogarty

I imagined you thought this thread was long archived.

So, I can get 1 date-picker working fine with your single date-picker code:

  <script>
  $('#datepicker').datepicker();
  </script>

For some reason, when I add the second date-picker, together with the extended code, neither date-picker works (even the first one breaks!).

Here’s a link to my project: https://preview.webflow.com/preview/dorians-first-project-f04e60?utm_source=dorians-first-project-f04e60&preview=d4734f4fc21053da74d5476eade8a9a5

What am I missing?

19

Hi @Dorian_Harris,

I checked your live preview and you need to have the code like this:

$( ".datepicker-1, .datepicker-2" ).datepicker();
20

Thank you @kevin.fogarty

I made the following changes:

  1. Replaced

$(‘.datepicker, .datepicker-2, .datepicker-3’).datepicker();

with

$( “.datepicker-1, .datepicker-2” ).datepicker();

  1. Changed the ID for the first date-picker from datepicker to datepicker-1 (kept the second as datepicker-2).

But, again, neither function now. Did I miss the point?

21

I fixed it, but unexpectedly.

Did not work for me but this did:

$(’#datepicker, #datepicker-2,).datepicker();

I don’t know enough (anything, really) about jQuery to know why the second method works but it does.

2 Likes