Hide input field from vuejs-datepicker

Question

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

Mitch Lillie · Accepted Answer · 2020-07-06 22:43:08Z

2

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.

answered Jul 6, 2020 at 22:43

Mitch Lillie

2,43721 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leos Literak · Accepted Answer · 2022-05-01 09:20:35Z

1

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>

edited May 1, 2022 at 9:20

Leos Literak

9,46022 gold badges98 silver badges174 bronze badges

answered Mar 20, 2022 at 13:27

Hasibul Alam Rahi

3222 silver badges7 bronze badges

Comments

zach_21 · Accepted Answer · 2021-05-24 10:46:54Z

0

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;
}

answered May 24, 2021 at 10:46

zach_21

3511 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

Hide input field from vuejs-datepicker

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related