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

Rearrange the li elements within multiple ul lists using JavaScript

Is there a way to reorder multiple ul-lists on my website using JavaScript? An example of the lists may be as follows: $(document).ready(function() { var ul = $('ul.filelist'); for (let u = 0; u < ul.length; u++) { const element = ul[ ...

javascripthtmljquery

The UglifyJsPlugin in Webpack encounters an issue when processing Node modules that contain the "let" keyword

Below is the code snippet from my project which utilizes Vue.js' Webpack official template: .babelrc: "presets": [ "babel-preset-es2015", "babel-preset-stage-2", ] webpack.prod.config.js new webpack.optimize.UglifyJsPlugin({ compress: { ...

javascriptnode.jswebpackvue.jsuglifyjs2

The module ~/assets/images/flags/undefined.png could not be found in the directory

When I use the img tag with a dynamic address filled using require, it works well in the component. However, when I try to write a test for it, an error is thrown. console.error Error: Configuration error: Could not locate module ~/assets/ima ...

javascripttypescriptvue.jsnuxt.jsvue-test-utils

German-formatted jQuery datepicker

Need help in changing jQuery datepicker formatting from MM/DD/YYYY to German style as d MMMM yyyy. Tried implementing the following code but encountering issues. <script type="text/javascript"> $(function () { $('.datepicker&ap ...

javascriptjqueryasp.net-mvc

Troubleshooting: Issues with JQuery validation for cross-domain URLs

I'm fairly new to using JQuery and I have a specific requirement which involves validating a link from another domain. If the validation is successful, I need to redirect (open the page in a new window) to that link. Otherwise, I should display an ale ...

javascriptjqueryvalidation

Is there a way to convert my function into a variable in order to execute an array of statements

I'm struggling to convert this code into a variable. I need to bind it inside a statement execute array. This is the code I am working on, which retrieves the current date and timezone. I attempted using $date = function() {}, echo $date(); but that ...

javascriptphpfunctiondate

Every time I click a button, I am trying to add JSON objects into an array and then show the outcomes

Currently, my goal is to create a random selection feature from an array that users can contribute to by clicking a button. I am a bit unsure about how to proceed with this task. The application is developed in React and it utilizes the movieDB's API ...

javascriptreactjs

Just starting out with jQuery: seeking advice on a user-friendly slideshow plugin, any tips on troubleshooting?

I am currently trying to incorporate a basic jquery slideshow plugin, but I seem to be encountering some difficulties. The documentation mentions the need to install 'grunt' and 'node dependencies', which is confusing to me as I am new ...

javascriptjqueryslideshow

The chosen element contains a value of -1

When the select element has a selected value of 4, form data is sent to the server and the controller returns a partial view. <script> $(document).ready(function () { var objSel = document.getElementById("IDVacationApplicationTyp ...

javascriptjqueryasp.net-mvc

Improving the functionality of multiple range slider inputs in JavaScript codeLet me

Is it possible to have multiple range sliders on the same page? Currently, all inputs only affect the first output on the page. Check out an example here: http://codepen.io/andreruffert/pen/jEOOYN $(function() { var output = document.querySelectorAl ...

javascripthtml

Encountered issue while converting half of the string array to JSON using JavaScript

I encountered an issue with the code below while trying to convert an array into JSON. Here is my code: <html> <head> </head> <body style="text-align:center;" id="body"> <p id="GFG_UP1" style="font-size: 16px;"> </p ...

javascripthtmlarraysreact-fullstack

When trying to import a Vue template snippet, you may encounter a message indicating a promise object

I'm facing a challenge in my project where I need to dynamically include a template snippet from another file into my Single File Component (SFC) template. However, instead of the expected markup, all I see is [Object Promise]. It seems that this issu ...

vue.jsvuejs2promise

Switching ng-Idle countdown time from seconds to minutes is possible by adjusting the configuration settings

I have implemented ng-idle in my application, where the warning popup appears after 10 seconds with the message: "Your session will be close in 10 seconds" However, I need to change this to minutes. The session should be closed in 5 minutes instead. How ...

javascripthtmlcssangularjs

Utilizing NextJs req.query parameter in Prisma for advanced query filtering

Currently, I am delving into the world of NextJS and experimenting with sending requests to an API while passing a parameter that is then used by Prisma to query the database. In order to achieve this, I've created a new file located at /api/posts/[s ...

javascriptnext.jsquery-stringprisma

js issue with passing form data to use with PHP mail function

As a novice, I am diving into the world of HTML webpage creation. Utilizing a free online template, my current project involves developing a Contact Page that triggers a php script to send an email with the captured fields. While I've successfully man ...

javascriptphpjqueryajax

Navigating to an Element in React's Document Object Model

Using React 16.4, I am faced with the need to scroll to a specific DOM element within the application. Since refs are deprecated in React, I am on a quest to find the most elegant solution for this problem. However, I find it challenging to come up with a ...

javascriptreactjs

Text in Angular vanishes upon reopening

I have a code snippet where I am trying to allow the user to edit and save a paragraph displayed on a side panel of the main page. Although the code works fine, allowing users to update the text and see it reflected in the network upon saving, there seems ...

javascripthtmlangulartypescript

A step-by-step guide on integrating JSON data into a dropdown list in VueJs

Here is a helpful currency code API link: I am looking for guidance on how to populate JSON data into a dropdown list using Vue.js. Below is my current code snippet: new Vue({ el: "#app", data() { return { currencyFrom: nul ...

vue.js

Contrast between the act of passing arguments and using apply with arguments

I have an important backbone collection that utilizes a save mixin to perform Bulk save operations (as Backbone does not natively support this feature). // Example usage of Cars collection define([ 'Car', 'BulkSave' ], function(Car ...

javascriptajaxfunctionbackbone.jsapply

The post request with Postman is functional, however the AJAX post request is not working. I have thoroughly reviewed the client-side JavaScript

I encountered a problem with an endpoint designed to create an item in my application. Sending a POST request through Postman works perfectly fine, as I am using Node.js and Express for the backend: router.post("/", jwtAuth, (req, res) => { console.lo ...

javascriptnode.jsajaxexpressclient-side