Streaming live at 10am (PST)

Simple Datepicker [100% Working]


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


#2

Works perfectly, thank you!


#3

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


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


#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?


#7

@JanneWassberg

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


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


#11

This post was flagged by the community and is temporarily hidden.


#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/