'Hide input field from vuejs-datepicker

I am using vuejs-datepicker in one of my vue project. I want to hide the default input and show the Calendar when user press a button. I am trying to have the <datepicker/> inside a div apply css for the div so that I can hide it.

<div class="datePickerDiv">
   <datepicker class="date" ref="datepick"></datepicker>
</div>

<style scoped>
.datePickerDiv {
  position: relative;
  float: left;
  margin-top: -40px;
}
.datePickerDiv input {
  border: none;
  background: transparent;
}
</style>

But its not working as I expect. Sample https://codesandbox.io/s/relaxed-sea-qfuix?file=/src/components/HelloWorld.vue:742-910

cssvue.jsdatepicker


Solution 1:[1]

You need to use the >>> combinator in order to deeply select the input tag:

.datePickerDiv >>> input {
  border: none;
  background: transparent;
}

This is because you're using the scoped attribute on your style tag. scoped will only work to apply styling to child components directly referenced in your current Vue component. In this case, datepicker is creating its own child input which will not be affected by the style, unless you use the deep selector shown above.

Solution 2:[2]

For applying style in your date picker tag, use input-class instead of only class. The styling does not work on the default scoped style tags, so add another style tag beneath your scoped style tag like follows:

<style scoped>
---your scoped Styles ----
</style>

<style >
-- Apply your unscoped style over vue date picker here ---
</style>

Example

<datepicker input-class="date" ref="datepick"></datepicker>
<style>
.date {
  display: none !important;
}
</style>

Solution 3:[3]

Add prop input-class with class hide-input. This will apply the hide-input class to the input element. Read more about props here.

<datepicker input-class="hide-input"></datepicker>
.hide-input{
  display: none !important;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mitch Lillie
Solution 2 Leos Literak
Solution 3 zach_21

Related Questions