CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapdatepicker
Adeel Asghar
Adeel Asghar

Reputation: 359

Bootstrap datepicker pop-up not shown the highlighted current date

I am using Bootstrap datepicker by using Bootstrap-datepicker API. When I click the button the calendar/datepicker pop-up shown but it didn't mark the current date as Blue font as shown in API examples.

I am using the below code:

   <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>

The calendar/datepicker pop-up shown but the current date is not highlighted as blue as shown in API Examples and also the mouse cursor is not pointer.

Please help me regarding this issue

Upvotes: 18

Views: 33273

Answers (6)

Oliver
Oliver

Reputation: 581

If you are using reactive form then you can also set today's date as a value in your formGroup initiation like this

  myform = new FormGroup({
    name: new FormControl('', [Validators.required]),
    event_date: new FormControl(new Date(), [Validators.required]), //This is the change you need to mention into your form Group
  })

Upvotes: 0

e-shfiyut
e-shfiyut

Reputation: 3675

Another option is to add this attribute to your datepicker input element:

today-highlight="true"

Upvotes: 0

Damon
Damon

Reputation: 4484

Just to add to the list of possible solutions as I was experiencing the same problem. The today class was not getting assigned to the current day using:

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

The html in the example has a class of date only. 

<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, I was missing the datepicker class. Added that to the element and now everything is working properly.

Needs to be:

<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>

Upvotes: 0

RaviRokkam
RaviRokkam

Reputation: 789

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

Here is the JSFiddle

Upvotes: 6

Matheus Santana
Matheus Santana

Reputation: 581

Bootstrap Datepicker depends on its own CSS for styling the calendar widget.

For quickly importing the dependence, you can pick a version from cdnjs (make sure you pick a .css extension) and import into your HTML like this:

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

Upvotes: 1

Gokhan Demirhan
Gokhan Demirhan

Reputation: 1129

If you are using this : https://github.com/eternicode/bootstrap-datepicker you have to give options when you initiate calendar, such as

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

Upvotes: 41

Related Questions