Vuejs-Datepicker Change Styles Doesn't Work

Unable to change width and height of vuejs-datepicker

First of all remove scoped from style portion. And obtain classname by inspecting datepicker element.

Here, in my case classname for startDate is .datetime-picker
input[data-v-a46a390c]

Now, apply to css like this:

.datetime-picker input[data-v-a46a390c] {
  width: 150px;
  height: 38px;
}

Using new Date() with v-date-picker doesn't work

Obviously (from the error message you're getting) v-datepicker expects to be bound to a String. You might want to try

data: { 
    date: new Date().toJSON(), 
    time: new Date().toJSON() 
}

https://codepen.io/connexo/pen/ypWxLv

Also see Vuetify API docs (which explicitly states it expects v-model to be of type String):

v-model   String    null    Controls the displayed date. Must use ISO 8601 format.

Hide input field from vuejs-datepicker

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.

---

Related Topics