Having trouble updating the styles on my vuejs-datepicker

I am attempting to customize the appearance of a vuejs-datepicker component from https://www.npmjs.com/package/vuejs-datepicker

 <datepicker
   format="dd/MM/yyyy"
   calendar-class="my_calendar"
   input-class="textfield"
   name="my_date" />

Although I have specified a width rule in my styles, my datepicker does not seem to adjust its width as expected

.my_calendar {
  width: 100px !important;
}

Does anyone have any suggestions on how to resolve this issue? Alternatively, is there another plugin available for implementing a datepicker in vuejs?

Appreciate any help!

cssvue.jsdatepickervuejs-datepicker

Answer №1

Dealing with a similar issue, I found that the default CSS doesn't work when it's scoped. To style Vuejs date picker and time picker, follow these steps:

  1. Replace "class" with "input-class='--your--class--name--here'"
  2. After your scoped style tag, add another style tag that is not scoped

`

    <template>
      <div>
       <datepicker
         v-model="startDate"
         input-class ="my-picker-class"
         placeholder="Start Date"
        </datepicker>       
     </div>
   </template>
    <style>
        .my-picker-class{
            border: none !important;
            border-bottom: 1px solid #F26F31 !important;
           }
    </style>

` 3. In this example, I used the class name .my-picker-class for styling. Make sure to include "!important" at the end of each styling rule.

Answer №2

Experiment with using the /deep/ selector to manipulate parent CSS properties:

/deep/ .classSelector { New CSS property }

Answer №3

Consider incorporating module style for a better look. Specifically, apply styles to the calendar-class. Implement it as shown below:

    <datepicker :class="$style.input" inputClass="input" />

    <style module>
      input {
         width: 100%;
         cursor: default;
      }
    </style>

Reminder: I encountered a similar problem with the input class and this solution worked well for me.

Answer №4

Passing CSS for a Vue.js datepicker can be done through props. There are three props available: wrapper-class, input-class, and calendar-class. For instance,

<datepicker input-class="rounded w-1/2" calendar-class="rounded"></datepicker>

Please note: Tailwindcss classes are being utilized in this example.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify website styling using JavaScript to edit external CSS/SCSS files

I am looking to 'modify' a file that is stored on my server, for example: <link rel="stylesheet" href="css/plugin.scss"> Not only that, but I also want to specifically edit a line within the SASS file. In SASS, you can declare variables i ...

javascriptjquerycsssass

Alter the hue on the fly

How can I change the color of a div based on whether it is currently red or green? I attempted the following code, but it doesn't seem to be working as expected. if ($(this).css("background-color")=="rgb(34,187,69)"|| $(this).css("background-color") ...

javascriptjqueryhtmlcss

Is it possible to have Mobile WebKit store the click position?

I am in the process of developing a unique framework specifically designed for WebKit devices. One of the features I have implemented is a series of list views that activate a 'hover' class when users touch them. Below is the jQuery/JavaScript co ...

javascriptjqueryiphonecssmobile-webkit

Page with a set width

Website: When viewing the blog at the standard zoom level, it appears aligned left with a large empty space to the right. How can I adjust the page size so that the blog is centered at all zoom levels? I've attempted some basic CSS adjustments but h ...

csssizezoomingfixed-width

Ensure that the nested div expands to the full height of the parent container div

I need my container div to expand in height to at least the full window height. If there is a lot of content inside the container div, I want it to exceed the window's height. This feature is working properly. Within the container div, I have placed ...

csshtml

What could be causing my image to lose responsiveness as the screen size gets smaller?

Struggling to figure out why the image is not responsive when the screen size decreases. I'm trying to create a signature block where the image adjusts in size, preventing the wrapper from stacking into two columns and keeping it as one. I've tr ...

htmlcssimageresponsive-designresponsive-images

Error encountered in VUE JS 3: The function vue.initDirectivesForSSR is not recognized as a valid function

I've been encountering some errors while trying to build my Vue web app with this configuration. I have searched for a solution, but couldn't find anyone facing the same issue as me. Any suggestions on how to resolve this problem? The build was s ...

javascriptnode.jsvue.jswebpack

What is the best way to customize the background color of a highlighted ToggleButton in react-bootstrap?

Currently, I'm using react-bootstrap and facing a challenge in changing the background color of a chosen <ToggleButton> to blue. For instance: <ButtonToolbar> <ToggleButtonGroup type="radio" name="options" ...

cssreactjsreact-bootstrap

Controlling the Alignment of HTML Div Elements

I'm struggling to align some of these divs, especially centering them. I want the page to closely resemble this image: Here are the specific requirements: 1) The header text should be centered vertically and placed in a separate div with a black back ...

csshtmlalignmentvertical-alignment

Using Javascript to implement a min-width media query

I'm currently facing an issue with my website () where the media query (min-width) is not effectively removing a JavaScript code within a specific div. The HTML structure in question is as follows: <div id="advertisementslot1"> <script lang ...

javascripthtmlcssmedia

Creating the appearance of a white sheet of paper on a computer screen

I appreciate all the comments provided earlier. Looking back, I realize I should have been more thorough in my explanation. Hopefully, the updated version will make things clearer. On a broad level, my goal is to create a digital screen background that re ...

htmlcsscolors

Using Vuejs to iterate over starting time and multiply it by a variable x to calculate the end time

I have some specific data points - start_time, end_time, x, and result. My goal is to present this information in a select option format, starting with the initial data provided in start_time, then continuously looping through multiples of the variable x u ...

vue.jsvuejs2vue-clivue-cli-3

What is the best way to align a text field to the left for larger viewports and switch it to the center for smaller viewports using bootstrap?

Below I have some code that should center the image and h1 when running in a small viewport, dropping them below each other. However, for some reason only the image centers and not the h1. <div class="container"> <div clas ...

htmlcssbootstrap-4text-alignment

Automatically closing the AppDateTimePicker modal in Vuexy theme after selecting a date

I am currently developing a Vue.js application using the Vuexy theme. One issue I have encountered is with a datetimepicker within a modal. The problem arises when I try to select a date on the datetimepicker component - it closes the modal instead of stay ...

javascripttypescriptvue.jsvuetify.js

Create a stylish accordion in asp.net with custom arrow buttons using CSS

Can anyone help me find the proper CSS for an asp.net ajax accordion menu with a vertical orientation that includes arrow buttons on each pane? I need the arrows to change when the menu is expanded versus collapsed. ...

asp.netcssajaxajaxcontroltoolkitaccordion

How can I trigger the execution of textarea HTML code with an onClick event using JavaScript?

When my fingers are lifted from the keyboard, some code will be automatically executed. I want to trigger this function when I click a button (onclick) instead of using onkeyup. <div id="result"></div> <textarea ...

javascripthtmlcss

Using Vue routing results in the page not correctly loading (fails to function)

Struggling with routing in my JS project. Contact me at [email protected], using vue version 3.5.5 and springboot for the backend. I've incorporated 2 plugins in pom.xml to run both the backend and frontend on the same port locally. However, when ...

spring-bootvue.jsroutes

How to Create a Compact JavaFX ComboBox

I'm attempting to create a more compact version of the ComboBox, but no matter what I try, the space between the text and arrow button remains consistent. When using the following CSS: .combo-box-base > *.arrow-button { -fx-padding: 0 0 0 0; ...

csslayoutcomboboxjavafxsize

Getting rid of the arrow icons in a Material UI TextField

I am facing a challenge with removing the up and down arrow icons from a Material UI TextField that I adjusted using the Material UI documentation (https://material-ui.com/components/autocomplete/#autocomplete) Highlights section. After trying various sol ...

cssreactjsmaterial-uiiconstextfield

How is it possible for the web browser to display fonts like Open Sans even if they are not installed on my device?

Explaining how a browser is able to correctly display text with a specific Font-Family, it can be described as follows: The font-family property allows designers to create a prioritized list of fonts for the browser to use when displaying content. If the ...

htmlcssbrowserfonts