Datepicker not showing days - Bootstrap

Question

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

did you include jqueryui on the page with the 'broken' html? because it works fine in a fiddle: jsfiddle.net/jjbswqL8 — Jeremy C.
– Jeremy C., Commented Jun 15, 2015 at 11:31

Guruprasad J Rao · Accepted Answer · 2015-06-15 12:33:48Z

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

Collectives™ on Stack Overflow

Datepicker not showing days - Bootstrap

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related