Tips for customizing vue-bootstrap-datetimepicker: Adjusting width and adding icons for a personalized touch

I am working with two date pickers from the Vue Bootstrap DateTimePicker package. While the functionality is great, I need to modify their appearance. Here is the relevant code snippet:

<template>
    <div>
        <div class="form-row">
            <date-picker
                    name="begin-date"
                    @dp-change="changeDate()"
                    v-model="model.beginDate"
                    :config="datePickerConfig"
                    ref="beginDate">
            </date-picker>
        </div>

        <div class="form-row">
            <date-picker
                    name="end-date"
                    @dp-change="changeDate()"
                    v-model="model.endDate"
                    :config="datePickerConfig"
                    ref="endDate">
            </date-picker>
        </div>
    </div>
</template>

One thing I would like to do is add a calendar icon to these components. Typically, I would do this with Bootstrap elements like so:

        <b-button
                id="Somebutton"
                :title="example for stack overflow"
                size="sm"
                :class="{danger: hasError}"
                :disabled="loading">
            <font-awesome-icon icon="columns"></font-awesome-icon>
        </b-button>

However, adding icons using 

<font-awesome-icon icon="columns"></font-awesome-icon>
or HTML (
<i class="fas fa-columns"></i>
) does not seem to work in the current setup. I'm also trying to figure out how to adjust the width of these components so they can sit side by side on the same line without success.

https://i.stack.imgur.com/GZ64Y.png

https://i.stack.imgur.com/W14Tv.png

The goal is to make them narrower to align next to each other, but after consulting the package documentation, I haven't found a solution yet.

javascriptvue.jsdatepickerbootstrap-datepicker

Answer №1

TL;DR: Here is the fiddle link for reference: https://jsfiddle.net/62a3Lu9y/6/

If you want to add a button to a form field, utilize the button addons for form fields.

<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-outline-primary" type="button">Button</button>
  </div>  
  <date-picker ... />
</div>

Simply adding the button to the field addon does not make it toggle the picker actively. To achieve this, bind the button event to the date picker within the vue-bootstrap-datetimepicker component:

  • Assign a ref to the date picker: 
    <date-picker ref="dp" .../>
  • Listen for @click events on the button and access the ref like so: 
    <button ... @click="$refs.dp...">
  • To be able to call functions on the inner date picker, use: 
    @click="$refs.dp.dp.show()"
    (note that this breaks encapsulation of the vue date picker component)

As for layouting, consider using a grid layout for your form, as shown in https://getbootstrap.com/docs/4.1/components/forms/#form-grid.

You can structure it like this:

<div class="row">
  <div class="col">
    <date-picker ... />
  </div>
  <div class="col">
    <date-picker ... />
  </div>
</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

What is the best way to send a message to multiple clients using different workers in both WebSocket and Express?

Currently in my express app, I am utilizing clusters and the ws package to run my project with a socket connection. The issue arises when a client connects to the socket - only one worker (such as worker with id 1) handles the connection. If another client ...

javascriptnode.jsexpresswebsocketws

Strange error message regarding ES6 promises that is difficult to interpret

Snippet getToken(authCode: string): Promise<Token> { return fetch(tokenUrl, { method: "POST" }).then(res => res.json()).then(json => { if (json["error"]) { return Promise.reject(json); } return new Token ...

javascripttypescriptes6-promisetypescript-typings

Running the `npm start` command in Angular tends to be quite time-consuming

When I use Visual Studio Code to run Angular projects, my laptop seems to take a longer time when running the server through npm start compared to others. Could this delay be related to my PC specifications, or is there something I can do to improve it? ...

javascripttypescriptnpmvisual-studio-codenpm-start

What steps should I take to modify my database while utilizing radio buttons in the edit mode?

I am experiencing an issue with the radio button functionality. When creating a new user.jsp, I am able to successfully add the value from the radio button to the database. However, when I attempt to edit the values in the jsp, the changes do not reflect i ...

javascriptjqueryhtmljsp

Attempting to iterate through a JSON object containing nested objects and arrays of objects

For hours, I've been struggling to navigate through this json file with no success. When I log the data, it shows that Response is an Object, data is also an object, and saleItemCategories is an array containing four objects. The first object in the ...

javascriptjqueryarraysjson

An easy way to create an input field after clicking a button

When I try to add a field on Button Click, the default field is not showing and does not get added upon button click I have put in my best effort but I cannot figure out what the problem is. I have added functions and used Math to generate a unique id. Th ...

javascriptreactjsarraysnext.js

What is the best way to dynamically insert a new row into a table, with each row containing a table heading and column?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tbl" class="tbl1"> <tr> <th> mobileno </th> <td class='mo' id="mo_0"> </td> ...

javascriptjqueryhtmlarraysajax

Issues with executing basic unit test in Angular Js

THE ISSUE: In an attempt to create unit tests for my Angular application, I set up a basic test app and wrote a simple unit test. However, the test is not functioning as expected. APPLICATION CODE: var app = angular.module( 'myApp', [] ); app ...

javascriptangularjsunit-testingkarma-runner

What is the process for transforming an asynchronous method into a synchronous version?

I am currently working on creating a functionality similar to the core fs module's methods, where there is an Async method by default and a Sync method if requested like fs.readDir() and fs.readDirSync(). In my case, I have a method named fetchUrls w ...

javascriptnode.js

Recognize different HTML components when an event occurs

My application is equipped with a multitude of buttons, inputs, and other elements that trigger different events. I am looking for a way to easily differentiate between each element and the event it triggers. For instance, consider the following snippet f ...

javascripthtmlangularjs

Error in Express application due to uncaught SyntaxError

I am attempting to live stream data using websockets to Chartjs, however I keep encountering the following error. main.js:1 Uncaught SyntaxError: Unexpected token < What could be causing this issue? The code for my server and HTML is as follows: ...

javascripthtmlnode.jsexpresschart.js

Sending data to a MySQL database using AJAX with PHP

While attempting to use ajax to insert a value in PHP, I am encountering an issue where the data is not getting inserted into the database. The code snippet I am using was sourced from answers provided on this site. Can someone please point out where I m ...

javascriptphpjquerymysqlajax

Is it possible to connect a date range picker custom directive in AngularJS with the behavior of AngularUI-Select2?

I'm currently utilizing Angular UI - Select2 directive for displaying an option box. Bootstrap Date-Range Picker for showing a date picker Both functionalities work effectively on their own. Functionality of the Date picker Whenever there is a ch ...

javascriptangularjsangularjs-directivedaterangepicker

Error: Reading the property 'any' of an undefined object resulted in a TypeError after an update operation

After updating multiple npm packages in my application, I encountered a series of errors that I managed to resolve, except for one persistent issue! TypeError: Cannot read property 'any' of undefined at Object.<anonymous> (/home/cpt/Deskto ...

javascriptreactjsnpmtypeerrorbabeljs

avoiding the duplication of effects on an object when new objects are added via ajax

Currently, I am facing a minor issue with an application that I am working on. The problem arises on a particular page where the user can edit a document by dragging modules onto the canvas area. Upon loading the page, JavaScript causes the modules to be ...

javascriptjqueryajax

How can I place a custom text message in the top-right corner of the assetManager popup within a Vue component using CSS in GrapesJS?

I have created an assetManager popup where I am looking to incorporate a text message in the highlighted red line area on the right-hand side of the popup. Previously, I had hidden the "Add button" button and textbox. Now, I would like to replace them wit ...

vue.jsvue-componentgrapesjs

Incorporating TypeScript into a project originally developed in JavaScript

I'm considering using TypeScript to write code for a JavaScript project. I've come to appreciate the benefits of TypeScript and am especially interested in using it for our AngularJS 1.5 project, which we plan to migrate soon. As I'm new to ...

javascriptangulartypescript

javascript code for subtracting values in arrays

I am facing a scenario where I have 3 arrays of the same length. My requirement is to automatically subtract the values in the first two arrays without any user input. If the result of subtraction is negative, I need to identify the index of that array num ...

javascriptphpjqueryhtmlarrays

What is the best practice for accessing specific components of JSON values that are delimited by colons?

When working with an API that returns a JSON containing strings separated by colons, such as: { "id": "test:something:69874354", "whatever": "maybe" } It may be necessary to extract specific values from these strings. For example, in the given JSON s ...

javascriptjson

The basic Node.js API for greeting the world encountered a connection failure

I'm currently working on setting up a basic hello world route using nodejs and express. After running node index.js, I see listening on port 3000 in the console, but when I attempt to access http://localhost:3000/helloworld, it just keeps trying to co ...

javascriptnode.jsexpress