b-form-datepicker show only month and year

Question

I have a b-form-datepicker . I want this b-form-datepicker to only select month and year . Is this possible?

I couldn't find an example in bootstrap-vue .

Answer 1

After spend some time on this requirement, I came up with this work around solution. Please have a look and see if it can help you.

 new Vue({ el: '#app', data() { return { value: '', displayValue: '', selected: '', formattedStr: '' } }, methods: { onContext(ctx) { // The date formatted in the locale, or the `label-no-date-selected` string let formattedStr = ctx.selectedFormatted; const modifyFormattedStr = ctx.selectedFormatted.split(',').slice(1); const month = modifyFormattedStr[0].trim().split(' ').shift(); const year = modifyFormattedStr[1]; this.formattedStr = `${month}, ${year}` // The following will be an empty string until a valid date is entered this.selected = ctx.selectedYMD.split('-').slice(0, -1).join('-'); this.displayValue = this.selected } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" /> <script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script> <div id="app"> <label for="example-input">Choose a date</label> <b-input-group> <b-form-input id="example-input" v-model="displayValue" type="text" placeholder="YYYY-MM" autocomplete="off" ></b-form-input> <b-input-group-append> <b-form-datepicker v-model="value" button-only right locale="en-US" aria-controls="example-input" @context="onContext" ></b-form-datepicker> </b-input-group-append> </b-input-group> <p class="mb-1">Selected: '{{ selected }}'</p> <p class="mb-1">Formatted String: '{{ formattedStr }}'</p> </div>