Sytling vuejs datepicker

Question

I am using vuejs datepicker from this repo

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-6">
                <label for="">From:</label>
                <datepicker v-model="period.from" :format="period.format" :clear-button="true"
                            @selected="fetchData"></datepicker>
            </div>
            <div class="col-md-6">
                <label for="">To:</label>
                <datepicker v-model="period.to" :format="period.format" :clear-button="true"
                            @selected="fetchData"></datepicker>
            </div>
        </div>
    </div>
</div>

Now the question is I want to override some styles for the datepickerlike make it small in width and height.

Any idea how I can do that ? I tried to change the width of dropdown but that does not affect the datepicker itself!

Answer 1

You can use the default format prop as the DatePickerFormat , it may look like what you are wanting you can do the following

<datepicker v-model="period.from" :format=" DatePickerFormat" :clear-button="true"
@selected="fetchData"></datepicker>

if you want to add more styling over this thing , you can check my this answer too https://stackoverflow.com/a/71546906/18083887