Color & Styles

Color 2.0.0+

                
<date-picker :auto-submit="false" />

                
<date-picker color="red" :auto-submit="false" />

                
<date-picker color="pink" :auto-submit="false" />

                
<date-picker color="orange" :auto-submit="false" />

                
<date-picker color="green" :auto-submit="false" />

                
<date-picker color="purple" :auto-submit="false" />

                
<date-picker color="gray" :auto-submit="false" />

If you want to use the customize color, you can use the styles prop with primary-color, seconday-color and in-range-background properties.

Styles 2.0.0+

                
<date-picker :styles="styles" />

                
data() {
    return {
        styles: {
            'primary-color':  '#17beb0',
            'secondary-color':  '#46c7bc',
            'in-range-background':  '#8dcac5'
        }
    }
}

Also you can use styles with style attribute:

                
<date-picker style="--primary-color:  #098ce4; --secondary-color:  #4ba1da;" />

See all styles properties in here!