vue-bootstrap-datetimepicker 中缺少指向下个月和上个月的箭头？

Question

I'm using this date picker which is working fine but appears to be missing some CSS. I have tried tons of suggestions to make this css work but with no luck. This is my current (relevant) code:

<template>
    <div class="row">
        <div class="col-lg-4">
            <div class="input-group">
                <date-picker
                        name="start-date"
                        ref="startDate">
                </date-picker>
                <div class="input-group-prepend">
                    <button class="btn btn-outline-primary" type="button" @click="$refs.startDate.dp.show()">
                        <font-awesome-icon icon="calendar-alt"></font-awesome-icon>
                    </button>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="input-group">
                <date-picker
                        name="end-date"
                        ref="endDate">
                </date-picker>
                <div class="input-group-prepend">
                    <button class="btn btn-outline-primary" type="button" @click="$refs.endDate.dp.show()">
                        <font-awesome-icon icon="calendar-alt"></font-awesome-icon>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import datePicker from 'vue-bootstrap-datetimepicker';
    // Import date picker css
    import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';


    export default {
        name: "DateRange",
        components: {
            myDatePicker,
        },
        date: {
            startDate: '2019-10-10',
            endDate:   '2019-09-09'
        }
    }
</script>

And this is how my datepicker looks like:

The arrows to the next/previous month are not visible but they are working fine. They should be visible as many of the examples the library shows . I checked inspect element and they were not overwritten by another object or anything. No warnings or errors are found. I'm truly out of ideas after having tried all the suggestions all the other questions here on SO suggest. Is there any way to get them to show up or if not maybe a custom arrows CSS but would prefer not going down that road.

Answer 1

You can add the following to your after the <script> tag and this will make custom CSS:

<style>
    i.custom-button-previous:before {
        content: "<<";
    }

    i.custom-button-next:before {
        content: ">>";
    }
</style>

This will put arrows of the given shape inside content in those two places where the arrows are missing

Answer 2

In the documentation, I found that bootstrap css is needed to run this picker.

I can't see bootstrap import in your code provided above which should be something like:

import 'bootstrap/dist/css/bootstrap.css';

Please try to import this or update the question.

Answer 3

The date picker uses glyphicons icons for the arrows. Can you check if you have "glyphicons-halflings-regular.woff" file getting imported in your website, if not include below css

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.woff'), url('http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.woff') format('woff');}
}

Answer 4

Add this, It works for me.

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>