Style

How to customize datepicker style

You can copy and paste the code below with the CSS variables directly on your CSS stylesheet or by creating a new one and link it to the <head> of your website.

:root {
  --dd-overlay: rgba(0, 0, 0, .75);
  --dd-background: #FFFFFF;
  --dd-text1: #333333;
  --dd-text2: #FFFFFF;
  --dd-primary: #FD4741;
  --dd-gradient: linear-gradient(45deg, #e61e68 0%, #FD4741 100%);
  --dd-radius: .35em;
  --dd-shadow: 0 0 2.5em rgba(0, 0, 0, 0.1);
  --dd-range: rgba(0, 0, 0, 0.05);
}

As you can see, CSS variables are refering to the main root so they will be apply globally. Of course, you can individually change each datepicker style by using the option "customClass" as shown below.

<input type="date" data-dd-opt-custom-class="style1">
<input type="date" data-dd-opt-custom-class="style2">

This way you will be able to change style properties by adding new classes with the customized variables. For example, if you only want to change primary color of each single datepicker, you can do it this way:

.style1 {
  --dd-primary: red;
}
.style2 {
  --dd-primary: green;
}

So now datepickers will change only primary color by still using the root ones as default.

Of course you can customize each classes used for all components by checking them through the inspector, then add customization on your CSS stylesheet.

Style options

These are all the style options available

Variable	Default
--dd-overlay	rgba(0, 0, 0, .75);
--dd-background	#FFFFFF;
--dd-text1	#333333;
--dd-text2	#FFFFFF;
--dd-primary	#FD4741;
--dd-gradient	linear-gradient(45deg, #e61e68 0%, #FD4741 100%);
--dd-radius	.35em;
--dd-shadow	0 0 2.5em rgba(0, 0, 0, 0.1);
--dd-range	rgba(0, 0, 0, 0.05);
--dd-monthBackground	var(--dd-gradient);
--dd-monthText	var(--dd-text2);
--dd-monthBorder	transparent;
--dd-confirmButtonBackground	var(--dd-gradient);
--dd-confirmButtonText	var(--dd-text2);
--dd-selectedBackground	var(--dd-gradient);
--dd-selectedText	var(--dd-text2);

Style presets

datedropper includes three custom style preset. Here how to use them:

<input type="date" data-dd-opt-custom-class="dd-theme-[NAME]">

Option	Result
dd-theme-dark
dd-theme-bootstrap