"Limit the display of the b-form-datepicker to only show the month and

Is there a way to customize the b-form-datepicker in order to only allow selection of the month and year? I've searched through bootstrap-vue but couldn't find an example.

Answer №1

After spending some time working on this particular requirement, I have devised a solution that may serve as a workaround. Please take a moment to review it and see if it meets your needs.

new Vue({
  el: '#app',
  data() {
    return {
      value: '',
      displayValue: '',
      selected: '',
      formattedStr: ''
    }
  },
  methods: {
    onContext(ctx) {
      // This code formats the date according to the locale, or uses a default string if no date is selected
      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}`
      // This line will be blank until a valid date is inputted
      this.selected = ctx.selectedYMD.split('-').slice(0, -1).join('-');
      this.displayValue = this.selected
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/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/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <label for="example-input">Select 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>

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

Passing arguments inside the source attribute of an image or link tag in Node.js and

As a beginner in NodeJS, I am facing an issue with passing arguments inside links and image sources. In my template.html file, I have included various scripts and elements to create a search form. The issue arises when I try to incorporate values from the ...

Row index retrieval in Datatable is not possible following a search operation

I have successfully created a datatable and can retrieve the row index of the data before any search action is performed. dataArray=[ [1, "Name1"], [2, "Name2"], , [3, "Name23"], ]; var table = $('#tblName').DataTable( { ...

Working with Angular's forEach method and handling null values

I'm encountering an issue where the array of selected devices is not getting the values when attempting to add multiple devices to a group. Can someone identify the problem or suggest an alternative method? I referred to http://www.dotnetawesome.com/2 ...

What is the reason behind arr.reverse() flipping the original array?

My goal is to reverse an array and store the reversed version in a new array without altering the original array. Here is the code I am using: var arr= ["1", "2", "5"] var arrTwo = arr.reverse(); console.log(arrTwo) \\ ["5" , "2" , "1"] console. ...

What is the best way to incorporate code into an Alexa Skill?

I'm encountering significant hurdles in grasping how to transform my Python or JS code into a functional skill for Alexa. I have snippets of code written in Python and partially in JS, yet despite my efforts, I am unable to incorporate it into an Alex ...

Guide to centering a Material UI Table on a webpage

Is it possible to center the <Table> within a fixed width <div>, and have a scrollbar appear when the browser is resized, while maintaining the fixed width of the <Table>? Thanks in advance. This is my current setup: <div> ...

How should a JavaScript object be properly formatted?

Recently, I created a project using ng-repeat with AngularJS 1.x, and it was smooth sailing. JavaScript: var app = angular.module('myModule', []); app.controller('myController', function() { this.dishes = [ { 'name&a ...

JavaScript encountered an issue as it attempted to reference the variable "button" which was

I am currently working on developing a new API, but I have encountered some issues with JavaScript: Below is my JS/HTML code snippet: const express = require('express'); const app = express(); const PORT = 3000; submit.onclick = function() ...

Utilizing jQuery to Maintain State Across Page Refreshes with Cookies

Currently, I am attempting to create a script that can retain its state even after the page is refreshed. Here is my progress so far: Utilizing jQuery: $(window).ready(function() { var voteId = $('.gallery-item a'); $(voteId).click(function() ...

What are some ways to calculate the average of data values in a Vue v-simple-table?

I am working with a v-simple-table. The "TotalAverage" value represents the total average of "ggFinalgrade". How can I retrieve this value? View current image The image I want to display The initial value is 20 calculated as (30+20+10)/3=20 The seco ...

Comparing dates in JavaScript using the built-in Date object

Currently, I am attempting to compare the current date with the one stored in a database using the code snippet below: <script> $("#registerButton").click(function() { var first = $("#scantime").val(); var second = $("#scanbartime").val(); if (parse ...

Display intricate header and preview in a printed datatable

Hey there, I've been using the Datatable plugin and it's really great. However, I've come across a problem with complex headers like this: <thead> <tr><td>some text</td></tr> <tr><td>some te ...

Guide to displaying a canvas as an image in a new tab using Reactjs

My current project involves using a canvas barcode generated by the react-barcode library. At the moment, I can only right-click on the canvas to open it as an image in a new tab. Is there a way to achieve this functionality with just a click of a button i ...

Enhancing this testimonial slider with captivating animations

I have designed a testimonial slider with CSS3 and now I am looking to enhance it by adding some animation using Jquery. However, I am not sure how to integrate Jquery with this slider or which plugins would work best for this purpose. Can anyone provide g ...

My Discord.js bot was running smoothly until I added a new command, and suddenly everything went haywire. Can someone assist me in figuring out what went

I recently delved into the world of creating discord bots by following a simple tutorial and customizing it to suit my needs. Initially, the bot worked perfectly fine. However, when I attempted to add the "Mistake" command, it stopped functioning properl ...

Learn the process of fetching checkbox values using JavaScript with this snippet

Is it possible to retrieve the name of the selected checkbox values/labels from the following code: <input id ="abc" value="abeexch" type ="checkbox"> <input id ="nam" value="suns" type ="checkbox"> If a checkbox is selected, how can I obtain ...

VueJS: interactive input field with dynamic value binding using v-model

I am facing an issue with VueJS regarding setting the value of an input radio along with v-model. I am confused as to why I am unable to dynamically set a value to an input and use a model to retrieve the user's selection. Here is a clearer represent ...

Exploring the possibilities with Vue 3, Vite, and ZoomSDK

I am encountering difficulties while integrating the Zoom Meetings SDK with Vue 3 and Vite. This is a basic setup of a Vue 3 project using the Vue-create CLI. I have also registered my app with Zoom and obtained my SDK key and SDK secret. Following the i ...

Exploring the functionality of v-chips within a v-text-field

I am trying to implement a search text field using vuetify's v-text-field, and I want to display the user input in a chip (such as v-chip or v-combo-box). However, v-text-field does not seem to support chips based on the documentation. Is there a work ...

Discover the power of Vuetify's message translation in combination with Nuxt i18n

I am looking to implement translated error messages for Vuetify validation failures Template section <v-text-field v-model="message.name" outlined :label="$t('page.contact.form.name')" :rules=nameValidation ...