Vue2-datepicker: Able to override default styling

[Graahf]

It would be nice if one could disable default styling and override with custom. Instead of using !important every time.

Is that going to be a possibility?

Otherwise, great datepicker - it was just what I needed for my project 👍

[mengxiong10]

V2.0. It's easy to use your style.

/* without css */
import DatePicker from 'vue2-datepicker/lib/datepicker.js'

/* modify by yourself */
import 'vue2-datepicker/lib/datepicker.css'

[mengxiong10]

@nelsonSetyawan09
It's the default css. https://github.com/mengxiong10/vue2-datepicker/blob/master/src/index.scss.
You can override by yourself.

.mx-datepicker {
  color: red;
}

[Arjun3023]

@mengxiong10 I am using your component in one of my vue page. I have also imported import 'vue2-datepicker/lib/datepicker.css' but still I am unable to override any css. What could be the issue?

[mengxiong10]

@Arjun3023 can you show your code ? which version of vue2-datepicker

[mengxiong10]

@Arjun3023
If you use v3.1.x. FYI: https://codesandbox.io/s/custom-css-oj0wq?fontsize=14&hidenavigation=1&theme=dark

[Arjun3023]

@mengxiong10 Thanks for the early response. It was an issue from my side only. After importing the css, I had to rerun my project as hot-reload didn't work after we import a page. Apologies

[NikhilJain95]

Hi @mengxiong10 , first of all great work brother. Is there a way to set title for "show-week-number" column and hide >> button only?

[JacobHelm36]

Hello, so I put everything in correct I think for the datepicker, but the calendar icon is not in the same line as the input field. Any thoughts on why it's doing this? Or is there a way to force the icon to be in the same line as the input field?

[mengxiong10]

@JacobHelm36 can you show your code ?

[JacobHelm36]

Hello,

I solved that problem, but how do I get the icons to show up. The mx-btn
and mx-btn-icon-right and basically any class that has mx in front of it?
Am I supposed to install a dependency?

Thank you,

On Fri, May 8, 2020 at 2:35 AM 也无风雨 [e-mail] wrote:

@JacobHelm36 https://github.com/JacobHelm36 can you show your code ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mengxiong10/vue2-datepicker/issues/103#issuecomment-625707150,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ANSCIQJWC6RFBUXN3BN4NGDRQO76DANCNFSM4FBJLDKQ
.

--
Jacob Helm
[email protected]
[phone]
https://www.linkedin.com/in/jacob-helm-66563818b/

[mengxiong10]

@JacobHelm36 import css.

import 'vue2-datepicker/index.css';