The highlighted current date is not being displayed in the Bootstrap datepicker pop-up

I am currently using Bootstrap datepicker through the Bootstrap-datepicker API. However, when I click the button to open the calendar/datepicker pop-up, it does not highlight the current date in blue font, as demonstrated in the API examples.

This is the code I am using:

   <body>
   <div class="input-group date col-md-5" id="datepicker" data-date-format="dd-mm-yyyy">
        <input class="form-control" size="56" type="text" value="" readonly>
        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
   </div>

    <script src="js/bootstrap-datepicker.js"></script>

    <script type="text/javascript">
        $('#datepicker').datepicker();
    </script>
    </body>

Although the calendar/datepicker pop-up appears, the current date is not highlighted in blue, and the mouse cursor does not change to a pointer as seen in the API Examples.

I would greatly appreciate any assistance with this issue.

javascriptjquerycsstwitter-bootstrapdatepicker

Answer №1

When implementing the Bootstrap Datepicker plugin, it is essential to provide options during the initialization of the calendar. For example:

$('#sandbox-container input').datepicker({ 
               todayHighlight: true
   });

Answer №2

$('#datepicker').datepicker({
    format: 'dd-mm-yyyy',
    todayHighlight: true
});

Check out the JSFiddle link

Answer №3

Customizing Bootstrap relies on its own CSS to customize the layout.

To easily include the necessary files, you can select a version from cdnjs (be sure to choose a .css extension) and add it to your HTML like so:

<head>
  <meta charset="UTF-8">
  <!-- ... -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/customizing-bootstrap/2.0.5/css/custom-bootstrap.css" />
</head>

Answer №4

After encountering the same issue, I discovered another solution to ensure the today class is assigned to the current day. Instead of just using:

$('.datepicker').datepicker({
    'format': 'mm/dd/yyyy',
    'todayHighlight': true
});

I realized that in the provided html example, the element only had a class of date.

<div class="input-group date">
    <input type="text" class="form-control" value="12-02-2012">
        <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
       </div>
</div>

In my case, it turned out that I was missing the datepicker class on the element. Once I added it, everything started working correctly.

The corrected version should look like this:

<div class="input-group date datepicker">
    <input type="text" class="form-control" value="12-02-2012">
        <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
       </div>
</div>

Answer №5

If you want to enhance your datepicker input element, you can consider including the following attribute:

highlight-today="yes"

Answer №6

When working with reactive forms, it is possible to initialize the formGroup with today's date as a value. Here's how you can do it:

  myForm = new FormGroup({
    name: new FormControl('', [Validators.required]),
    eventDate: new FormControl(new Date(), [Validators.required]), //Make sure to include this change in your formGroup definition
  })

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

"Looking to spice up your website with a dynamic background-image

I've encountered a problem with my CSS code for the header's background image. Despite trying various methods to create a slideshow, nothing seems to be working. Can someone provide guidance? I have four banner images named banner1, banner2, bann ...

javascripthtmlcssslideshow

How to apply new CSS styles to override the existing ones for an element

I have a website with custom CSS styling applied to an <A> tag, including styles for A:hover. However, I need to remove these hover effects for one specific instance of the tag. Is there a way in CSS to set a property so that it does not change? Let ...

htmlcsshover

A method to ensure that inline <div> elements occupy the entire available width

The typical solution for this issue is using float, however, it does not work in my situation. I attempted to utilize flexbox and overflow:hidden for the parent element, but unfortunately, it did not resolve the issue. Currently, I am dealing with three i ...

htmlcss

Using React and Material UI to hide a child element when it is hovered over with the help of withStyles

I am trying to hide the ListItemSecondaryAction element with the class actions when hovering over the ListItem with the class friendsListItem. Despite attempting to use the descendent selector within styles, I have not been able to achieve the desired res ...

javascriptreactjsmaterial-ui

Find the Time Difference in IST using JavaScript

Is there a way to calculate the time difference between two different time zones in javascript? var startTime = doc.data().startTime; output: Fri Dec 06 2019 19:00:00 GMT+0530 (India Standard Time) var currentTime = new Date(Date.now()).toString(); outpu ...

javascript

Tips for customizing the appearance of date circles and text in Vue V-Calendar.io

On v-calendar.io, there is a demo showcasing the correct display where the date "2018-01-01" has a red background and dark text: However, my display does not match that. I have included Vue.js and v-calendar through CDN, and the page is formatted in HTML ...

javascriptcssvue.jsvue-componentv-calendar.io

Using JavaScript to automate keystrokes programmatically

Is there a way to programmatically close a webpage using the keyboard shortcut control + W? I'm wondering if I can write code that will mimic this specific shortcut (control+W). ...

javascriptphphtml

I am looking to utilize React and Next.js to map my array from an object. The component is a function employing hooks

I am attempting to map an array within an object and encountering some challenges. The structure of the object is as follows: const data = {data: (6) [{…}, {…}, {…}, {…}, {…}, {…}], page: 2, per_page: 6, total: 12, total_pages: 2} I have been ...

javascriptreactjsuse-state

Organizing Files and Creating Applications with Electron

Recently, I came across Electron and found it to be a fantastic tool for developing desktop applications. I created a basic Twitter Aggregator that functions when I execute nodemon app.js. Now, I want to package it with Atom in order to run it in its own w ...

javascriptnode.jselectron

Tips for acquiring the initial fully visible item within a scrollable element with horizontal alignment through jQuery

I'm trying to use jQuery to find the first visible element inside a scrollable DIV, but I can't quite get it to work correctly. Can someone please help me identify what's causing the issue? $('div').on('scroll', functio ...

javascriptjqueryhorizontal-scrolling

The issue arises when trying to use data provided by a service, resulting in an "undefined

Looking to create a handler that generates an array of categories based on the presence of "categories" for a specific "resource". However, encountering an error with the last method. ERROR TypeError: "this.allProjectResources is undefined" import { Res ...

javascriptangulartypescript

Improving mongo information using angularjs

Have an Angular and MongoDB application. This is a part of my API where I have POST and PUT requests. The POST request works fine, but when I send a PUT request, I get an error "Cannot set property 'typelocal' of undefined". However, the PUT requ ...

javascriptangularjsmongodbexpress

Encountering a problematic JQuery Ajax request to a RESTful API

I am currently in the process of trying to authenticate against demo webservices that were developed by one of my colleagues. While Cross-origin resource sharing is allowed and functions perfectly when I attempt to call from the Advanced Rest Client plugin ...

jqueryajaxjsonrest

Change the identifier of a value within the React state

I am currently working on a form that includes input fields for both keys and values. The goal is to allow users to edit key value pairs, where editing the value field is straightforward, but editing the key field requires updating, removing, and tracking ...

javascriptreactjsmaterial-ui

Trouble arises when trying to import Jest with Typescript due to SyntaxError: Import statement cannot be used outside a module

Whenever I execute Jest tests using Typescript, I encounter a SyntaxError while importing an external TS file from a node_modules library: SyntaxError: Cannot use import statement outside a module I'm positive that there is a configuration missing, b ...

javascripttypescriptwebpackjestjsbabeljs

The error in creating a Firebase user is detected following the execution of the 'then' block

I created a signup page in my Vue app where users can input their information. Once the input is validated, I use firebase auth to add the user. Upon successful sign up, I want the page to automatically navigate to the login page. Here is the code for my s ...

javascriptfirebasevue.jsfirebase-authenticationvue-router

Retrieve the 'current' scope using a 'master' controller

I have a main controller that I refer to as my 'root' controller, which is declared using the ng-controller attribute. Additionally, I have a few other controllers that are created dynamically through a $routeProvider. I want to define a function ...

javascriptangularjs

What is the best way to cancel a long-polling request in jQuery?

I am currently implementing... $.getJSON(url + "&callback=?", function (b) { ....... }); for a long-term polling request. There are instances where I need to terminate the ongoing request. Is there a way to achieve this? ...

jqueryjsonlong-polling

How to use Typescript to find the length of an array consisting of either strings or

I am trying to determine the length of a string or array, stored in a variable with the data type var stepData : string | string[]. Sometimes I receive a single string value, and other times I may receive an array of strings. I need the length of the array ...

javascriptarraystypescriptangulartypescript1.5

Unable to navigate using single-page navigation due to JavaScript malfunction

I'm struggling with this particular code and I'm hoping for some assistance. My experience with javascript is limited, so I'm reaching out for help instead. I am trying to implement the jquery single.page.nav feature that enables navigation ...

javascriptjqueryscroll