Datepicker Not Displayed Properly

[dhimasyoga]

I don't know what's wrong, but the datepickk displayed like this :

Here are what I've done :

• I separated the "custom configuration" of datepickk in separated file named "custom-datepicker.js", and I've write it with the right path
• I've included the datepickk.min.js and datepick.min.css
• I'm going to place the datepicker inside a div with id calendarContainer, and this is my code :
  var datepicker = new Datepickk({ container: document.querySelector('#calendarContainer'), inline: true, range: true });
• I'm not making any changes in the datepickk.min.css and the datepickk.min.js file

I don't know what's wrong, but the date items seems like block-displayed. I need your help asap. Thanks in advance :)

[crsten]

Hi,
Do you have some other stylesheets that are changing the datepickk styles?

[dhimasyoga]

I'm not sure, i don't make my own style for the sidebar list items, i mean i'm not giving a display property to it

[crsten]

Could you try to inspect it and check if any other stylesheets are changing the default styling?

[dhimasyoga]

I've inspect it and i found that .d-tables { display: table!important; } make the date items seem like 'block-displayed'. Then i try to make my custom css style to change .d-tables display property to display: inline, but nothing changes, the datepickk items still look like 'block-displayed'

[DisobedientMedia]

Getting same problem, looks like it is not compatible with Bootstrap 4.
Not tried Bootstrap 3

[ashep]

+1, it's not compatible with Twitter Bootstrap 4. because it uses .d-* classes as utility ones. For more information: https://getbootstrap.com/docs/4.0/utilities/display/

[ashep]

#37 contains renamed classes to avoid intersection with Bootstrap's class names.