Javascript plugins
jQuery plugins
Legal
How to Customize Datepicker Style
To customize the datepicker style, copy and paste the code below into your CSS stylesheet or create a new stylesheet and link it to the <head> of your website.
:root {
--dd-overlay: rgba(0, 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: 0.35em;
--dd-shadow: 0 0 2.5em rgba(0, 0, 0, 0.1);
--dd-range: rgba(0, 0, 0, 0.05);
} The CSS variables are defined in the :root selector, making them globally applicable. However, you can style individual datepickers using the customClass option, as shown below:
<input type="date" data-option-custom-class="style1">
<input type="date" data-option-custom-class="style2">This allows you to customize the style for each datepicker instance. For example, to change the primary color of specific datepickers while maintaining the default root styles, use the following approach:
.style1 {
--dd-primary: red;
}
.style2 {
--dd-primary: green;
}In this example, each datepicker uses a unique primary color while relying on the default root styles for other properties. You can also inspect and customize any CSS classes used by the datepicker components by adding your own styles to the CSS file.
Style Options
Below are all the available style variables and their default values:
| Variable | Default Value |
|---|---|
--dd-overlay | rgba(0, 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 | 0.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 pre-built style presets. You can apply them as follows:
<input type="date" data-option-custom-class="dd--theme-[NAME]">| Preset Name | Preview |
|---|---|
dd--theme-dark | |
dd--theme-bootstrap |