Choose styles and color palettes for your date picker

datedropper themes

datedropper comes with three different themes which will allow you to customize its style and color palette.

Specifically, in addition to the default theme, you will be able to activate the following extra themes.


Vanilla theme preview

Vanilla Theme Preview


Leaf theme preview

Create your own theme PRO

Use the Theme Generator to create your unique combination of styles and color palettes for your date pickers.

The Theme Generator allows you to customize the following features of your date picker:

  • Color palette
  • Border radius
  • Box shadow
  • Font style

Keep in mind that the Theme Generator is only available with the Pro version of datedropper.

Set a datedropper theme

Like for all the other datedropper options, themes can be set in two ways:

  • using a data attribute;
  • using Javascript when initializing datedropper.

Set a theme by using a data attribute

In order to set a theme by using a data attribute, add and customize the data-dd-theme attribute on the element on which datedropper has to be executed.

For instance, you can enable the leaf theme by simply customizing the selector as follows:

<input type="text" data-dd-theme="leaf">

Set a theme by using Javascript

You can also set your theme during the initialization by customizing the theme variable of the .dateDropper() function.

For instance, you could activate a custom theme called my-theme as follows:

theme: 'my-theme'

Related articles