How to setup a jQuery datepicker (with example)

When designing online forms, there's often the need to associate a datepicker to one of the inputs to allow the user to easily select a date. Usually, by clicking on the input, the datepicker allows the user to open an interactive calendar in a small overlay.

Datepickers are thus a really useful interface for filling in those fields of a form in which a date must be entered by the user.

Why choosing the right datepicker is so important

When it comes to UI, the difference between a good or a bad interface often lies in the details. Designing an interface that's intuitive and easy for users can be really hard.

Among many options available out there, you'll need to choose a datepicker to match your needs both in terms of features and ease of use, while making your interface shine, thus improving your user experience.

jQuery UI Datepicker

One of the most popular alternatives you can find out there is the jQuery UI Datepicker. jQuery UI is really popular and widely used in lots of websites that need interactive features. Customizing the jQuery UI Datepicker in order to build a well-designed and ease of use datepicker, though, can take quite some time.

Unless you customize it by designing your own theme, jQuery UI Datepicker comes with this really basic default style:

jQuery UI Datepicker Example

That's where datedropper comes in handy, by allowing you to easily create a datepicker which is user-friendly, marvellously designed and fully responsive at the same time.

datedropper jQuery datepicker

datedropper is a jQuery datepicker plugin developed down to the very last detail to offer you a responsive datepicker with fantastic ease of use and a marvelous design. In just a few clicks, you can install datedropper on your site and initialize it on one or more elements.

Thanks to its many options and features, you'll be able to customize every aspect of your datepicker, from its language, date format and style to any other features.

Example of jQuery datepicker powered by datedropper

Get started with datedropper and build your responsive datepicker in just a few easy steps:

  • get datedropper in its Lite version or Pro version, depending on the features you need to unlock;
  • login into your datedropper dashboard and copy the embedding code;
  • paste the datedropper embedding code into the <head> of your website pages. Also, don't forget to include a CDN version of jQuery before integrating datedropper;
  • initialize datedropper on the datepicker elements on which you need to use it by simply adding a class or a data attribute.

The following example includes everything you need to start using datedropper on one of your datepicker elements in a flash:

<head>
  ...
  <!-- jquery -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <!-- datedropper -->
  <script src="https://cdn.datedropper.com/get/{{LICENSE}}"></script>
</head>
<body>
  ...
  <!-- datepicker element -->
  <input class="datedropper-init" type="text">
  ...
</body>

Please note that <script src="https://cdn.datedropper.com/get/{{LICENSE}}"></script> is a sample code. Get datedropper Pro and make your datepicker unique in just a few clicks.

jQuery datepicker live demo

Here we have two live examples of datepickers powered by datedropper. Play with them and discover two of the datedropper themes that can be enabled seamlessly:

And if you need to further adjust style and color palette of your datepicker, check out our documentation to learn more on all the available options.

 

Get datedropper Pro

Using the DDLOVER discount code, it's just $19 instead of $39