CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapdatepicker
YaBCK
YaBCK

Reputation: 3029

Datepicker not showing days - Bootstrap

I'm struggling with the answer to this, the reason I'm struggling is because the datepicker is working on one of my pages.

Could an issue be that i'm loading a datatable at the same time as the datepicker? Because on the broken page, i'm loading the datatable which uses the date from the datepicker.

Problem reproduced

JSFiddle - Without including the FilterLoggingTable function, it works fine.

Code snippet for Datepicker

if (typeof $('#generateDate, #loggingDatePicker').datepicker !== 'undefined')
{
    var currentDate = new Date();
    $('#generateDate, #loggingDatePicker').datepicker(
    {
        format: 'dd-mm-yyyy',
        autoclose: false
    });
    $('#generateDate, #loggingDatePicker').datepicker('setValue', currentDate).datepicker('update').datepicker();

}

HTML (Broken Datepicker)

<div class="col-sm-6">
    <div class="input-group date col-md-3 pull-right" data-date-format="dd-mm-yyyy" data-date="12-04-2015">                        
    <input id="loggingDatePicker" class="form-control" type="text" value="12-04-2015" size="14" />
       <span class="input-group-addon add-on">
          <span class="glyphicon glyphicon-calendar"></span>
       </span>
    </div>
</div>

HTML (Working Datepicker)

<div class="col-md-4 form-group">
   <div class="input-group date " data-date-format="dd-mm-yyyy" data-date="12-04-2015">                        
   <input id="generateDate" class="form-control generatePDFBTNS" type="text" value="12-04-2015" size="14" />
     <span class="input-group-addon add-on">
         <span class="glyphicon glyphicon-calendar"></span>
     </span>
   </div>
</div>

Broken Page

enter image description here

Working Page

enter image description here

Upvotes: 1

Views: 1656

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

DEMO

Ok. The problem was with your below line:

("tr:not(:has(>th))").show().filter

inside FilterLoggingTable() function.

What this does is hides or shows all the trs in the page when criteria is matched!Now why this effects your calendar is because the bootstrap creates table for your calendar when you initialize the datepicker and that table will also match the above criteria which should be only there for dataTables.

So, what you need to do is just get the trs of dataTable as below:

$('#dataTables-example').find("tr:not(:has(>th))").show().filter(function ()

Now you can keep autoclose:false if you want..

Upvotes: 1

Related Questions