Double arrow in v-date-picker

[PonchRobles]

Hi! Currently I have a visual problem using the v-date-picker component, it looks like this: <v-date-picker mode="time" v-model="schedule.end" :timezone="timezone" is24hr /> timezone: ''

I use this component inside another, and in this same component I also use the v-calendar component, so both components exist in the same file, will it have something to do with it? Example:

 CustomCalendars.vue
   |--v-calendar
   |--v-date-picker

My Env:

"vue": "^3.0.11",
"v-calendar": "^3.0.0-alpha.4",
"tailwindcss": "^2.0.2",

I'm not sure if I'm missing something, I also tried to inspect the item but was unable to locate it when inspecting.

From the beginning of the implementation of the component I had problems with the default styles when creating a component from an existing example that is related to their compilation, this is the example I used as a base: custom-calendar.vue . And these are the styles that I changed to avoid compilation problems:

::-webkit-scrollbar {
  width: 0px;
}
::-webkit-scrollbar-track {
  display: none;
}

.custom-calendar.vc-container, .vc-header, .vc-weekday, .vc-day, vc-day-dots {
  --day-border: 1px solid #b8c2cc;
  --day-border-highlight: 1px solid #b8c2cc;
  --day-width: 90px;
  --day-height: 90px;
  --weekday-bg: #f8fafc;
  --weekday-border: 1px solid #eaeaea;
}
.vc-header {
    padding: 10px 0;
}
.vc-weeks {
    padding: 0;
}
.vc-weekday {
    background-color: var(--weekday-bg);
    border-bottom: var(--weekday-border);
    border-top: var(--weekday-border);
    padding: 5px 0;
}
.weekday-7, .weekday-1 {
    background-color: #eff8ff;
}
.vc-day-dots {
    margin-bottom: 5px;
  }
.is-not-in-month {
    background-color: rgb(243, 244, 246);
}
.vc-weekday, .vc-title {
    text-transform: uppercase;
}

I'm worried this creates duplicate arrows issue in timepicker, I really need the styles in v-calendar. Thank you very much for this great component and greetings!

[vaverij]

If you use Tailwind CSS then just reset background image for calendar's select.

In component's styles paste this:

.vc-select select {
    background-image: unset;
}

The reason is Tailwind automatically puts its own background image of arrow.