Style the datepicker

[UXandre]

Any one know how to style the datepicker with the variables? Not sure what that means with the variables but tried to update its CSS without luck. Any quick pointer would be appreciated. I have no idea what it is and where to put the following:

{ "--vdp-bg-color": "#ffffff", "--vdp-text-color": "#000000", "--vdp-box-shadow": "0 4px 10px 0 rgba(128, 144, 160, 0.1), 0 0 1px 0 rgba(128, 144, 160, 0.81)", "--vdp-border-radius": "3px", "--vdp-heading-size": "2.5em", "--vdp-heading-weight": "bold", "--vdp-heading-hover-color": "#eeeeee", "--vdp-arrow-color": "currentColor", "--vdp-elem-color": "currentColor", "--vdp-disabled-color": "#d5d9e0", "--vdp-hover-color": "#ffffff", "--vdp-hover-bg-color": "#000000", "--vdp-selected-color": "#ffffff", "--vdp-selected-bg-color": "#0baf74", "--vdp-elem-font-size": "0.8em", "--vdp-elem-border-radius": "3px", "--vdp-divider-color": "#d5d9e0" }

[BjRnJ]

data() {
    return {
      customStyle: {
        "--vdp-hover-bg-color": "#CCC",
        "--vdp-selected-bg-color": "#CCC"
      }
    }
  }

and then

<datepicker :style="customStyle" v-model="..." />

[howard-tzw]

@BjRnJ Thanks, it works!

[icehaunter]

Or just dump those CSS variables into your CSS file https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties