Is it possible to customize the icon set for the Tempus Dominus datetimepicker?

Recently, I started using tempusdominus for Bootstrap 4.0 and everything is working smoothly with my backend integration. However, the site is already using an icon set (material-icons) and I would like to incorporate those icons into tempusdominus as well.

I attempted to make this change:

<div class="input-group-text"><i class="fa fa-calendar"></i></div>

I wanted to use my material-icons icon instead of the default clock icon. Unfortunately, I have been unable to figure out how to make this change.

I've checked the Javascript and consulted the documentation, but it seems that only Font Awesome icons can be easily swapped out.

javascriptdjangobootstrap-4icons

Answer №1

One method I've discovered is by customizing the icons for each option on the picker:



$('#datepicker').datetimepicker({
    viewMode: 'months',
    format: 'MM/YYYY',
    locale: 'pt_BR',
    icons: {
      time: 'mdi mdi-clock',
      previous: 'mdi mdi-arrow-left',
      next: 'mdi mdi-arrow-left',

    }
});

Answer №2

This code allows me to customize the font:

const td = new tempusDominus.TempusDominus(document.getElementById("birthday_target"), {
    localization: {
        format: 'yyyy-MM-dd',
    },
    display: {
        icons: {
            previous: 'fas fa-solid fa-chevron-left',
            next: 'fas fa-solid fa-chevron-right',
        }
    }
});

Here is where I input my birthdate:

<!-- birthdate -->
<div class="h1 mt-20">Birthdate</div>
<div class="row mt-8">
    <div class="col">
        <label class="form-label required">Birthdate</label>
        <div class="input-group" id="birthday_target" data-td-target-input="nearest" data-td-target-toggle="nearest">
            <input v-model="memberNewData.birthday" id="birthday_datepicker" type="text" data-td-target="#birthday_target"
                   class="form-control" @change="onChangeField" />
            <span data-td-toggle="datetimepicker" class="input-group-text" data-td-target="#birthday_target">
                <i class="las la-calendar fs-2"></i>
            </span>
        </div>
        <div class="alert alert-warning" v-if="errors.items && errors.items['birthday']">
            <p v-for="(error, keyError) in errors.items['birthday']" :key="`error-${keyError}`">
                {{ error }}
            </p>
        </div>
    </div>
</div>

https://i.sstatic.net/544cx.png

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

Shifting around haphazardly positioned crates using the cursor

I've successfully developed a program that fills the canvas with randomly positioned boxes of various colors. While this task was relatively easy, I'm now facing a challenge in moving these colored boxes around using my mouse. Additionally, I wan ...

javascript

Enhancing the model using Sequelize JS

Currently, I am in the process of developing a basic API using Express and Sequelize JS. Recently, I encountered an issue while attempting to update a record with req.School, but no changes seemed to occur. Despite checking the code below thoroughly, I did ...

javascriptnode.jssequelize.js

How to use JQuery UI sortable to automatically scroll to the bottom of the page

Having trouble with a few sortable tables and here is how I initialized the sortable object: var options = { helper: customHelper, handle: ".moveTargetDeliverables", containment: "#fieldset_deliverables_summary", tolerance: 'pointer&a ...

javascriptjqueryhtmlcssjquery-ui

Having trouble connecting to the Brewery API, could use some guidance from the experts (Novice)

I'm currently facing some difficulties connecting to a brewery API (). I am developing a webpage where users can input the city they are visiting and receive a list of breweries in that city. As someone unfamiliar with APIs, I am unsure about the nece ...

javascriptapi

What is the best method to retrieve a secure httponly cookie in a Next.js application?

Our next JS application is making a request to The backend team has configured the response cookie as a secure HttpOnly cookie. const session = await ( await fetch( `https://demo.com/auth/session`, requestOptions )).json(); console.log(&qu ...

javascriptreactjscookiesnext.jshttpcookie

ng-bind-html is having trouble parsing the HTML correctly and binding it

Here is the code for my controller: myApp.controller('actionEditController', ['$scope', '$stateParams', '$sce',function ($scope, $stateParams, $sce) { $scope.table="<p>OOPSY</p>"; $sc ...

javascripthtmlangularjs

Prevent regex special characters in JavaScript while preserving the original string for keyword matching

As I develop my web page, I encountered an issue while trying to highlight text based on user input in the search box. My search algorithm matches each space-separated keyword, but ran into problems when including brackets in the search term. This caused a ...

javascriptregexvue.js

What is preventing me from installing react-router-transition on the 1.4.0 version?

$ npm install -S <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dffe8eceef9a0ffe2f8f9e8ffa0f9ffece3fee4f9e4e2e3cdbca3b9a3bd">[email protected]</a> npm ERROR! code ERESOLVE npm ERROR! Unable to r ...

javascriptnode.jsreactjsnpm

The chatbot text input feature is malfunctioning and failing to display the entered text in the chatbox

Hi there! I'm in the process of creating a chatbot using a basic input text box and button in HTML, with a php start function. Unfortunately, when I enter text into the textbox, nothing is showing up on the screen and the button doesn't seem to b ...

javascriptphphtml

Utilize Dojo to programmatically showcase an image

I'm facing an issue while trying to programmatically display an image using dojo. I have tried using both "dijit/Dialog" and "dojox/image/Lightbox". However, when using the Dialog method, instead of displaying the image, some random characters are sh ...

javascriptajaxdojo

Using AngularJS and JavaScript, set the Submit button to be enabled only when the email input is valid and a value is selected in

I'm trying to create a form that includes an email input field and a drop-down list sourced from a database array. Initially, the submit button is disabled when the form loads. My goal is to figure out how to activate the submit button only when the ...

javascriptangularjsvalidation

What is the precise output of getFloatTimeDomainData function?

I'm puzzled about the return values of getFloatTimeDomainData. The range of possible values and their significance are unclear to me. According to the specs: This method copies the current down-mixed time-domain (waveform) data into a floating-poin ...

javascriptweb-audio-api

Develop a customized modal pop-up for every object using React

In my React app, I have a list of cards with buttons on each one. When the button is clicked, it should open a modal popup displaying some information. However, I am facing an issue where I can't create a unique modal for each card because the data t ...

javascriptreactjsbootstrap-modal

Enhance Your Django Experience with the Save and Add Another Feature

Seeking advice on implementing a "Save and add another" feature in my Django App. I added an elif condition to a button in my Views.py file, but I'm struggling to find relevant resources to guide me, especially with my specific code. I've attemp ...

pythondjangowebdjango-templatesdjango-views

What is the best way to pass a state within a route component in react-router?

... import { useNavigate, NavigateFunction } from "react-router"; ... function Form(): JSX.Element { const navigateToCountry = (country: string) => { // Code to navigate to country page with the given country } const [selectedCount ...

javascriptreactjstypescriptreact-hooksreact-router

Navigating through the execution of a program with the use of

As I navigate my way through learning express, a question has arisen regarding the mechanics of the next() function. Is my understanding correct that when next() is invoked, it immediately initiates the execution of app.get, while anything below next() ...

javascriptexpressroutesmiddleware

Engaged in revisiting a previous project and stumbling upon unfamiliar code

I need help understanding the code below. It's a bit confusing to me, but I really want to understand it. reverse = [-1, 1][+!!reverse]; ...

javascript

Permission Denied when trying to use a non-root user in PNPM docker command

Today, I came across pnpm and it successfully resolved the issue I was facing with npm timing out during installation, which is absolutely fantastic. However, I encountered a problem with pnpm when using it in a docker image. In the past, when using npm, ...

javascriptnode.jsdockernpmpnpm

Learn how to manipulate nested objects and arrays within JSON data by utilizing AJAX and JQuery for seamless access and processing

In my complex data structure, there are nested objects and arrays. How can I efficiently retrieve specific values or keys like 1, 105, and 1055? Here is an example of the data structure: [{"1":{"url":"http:\/\/web.com\/","catname":"HOBBIES ...

javascriptjqueryajaxarraysjson

Tips for transferring information from controller JavaScript to view JavaScript within AngularJS

Currently, I am working on an angularJS application where I retrieve data from a REST service within the controller. The retrieved data is then passed to the view using $scope. However, I encountered an issue when trying to use this data in my in-page Java ...

javascriptangularjs