Calender Widget is not showing/visible with BS4

[ayaanraj]

I'm using Aurelia-skeleton-esnext and bootstrap v4. And I have configured the plugin as below: In main.js:

.plugin('aurelia-bootstrap-datetimepicker', config => {
      // extra attributes, with config.extra
      config.extra.iconBase = 'font-awesome';
      config.extra.withDateIcon = true;
      // or any picker options, with config.options
      config.options.showClear = true;
      
      // or any picker options, with config.options
      config.options.showTodayButton = true;
      
      // or any picker options, with config.options
      config.options.format = 'DD-MM-YYYY hh:mm';
      
      // or any picker options, with config.options
      config.options.allowInputToggle = true;

      // if you use Bootstrap 4 Beta 3
      config.extra.bootstrapVersion = 4;

      // you can also change the Bootstrap 4 button class, default is shown below
      config.extra.buttonClass = 'btn btn-outline-secondary';
    })

So, when I select or focus on input element the result is as shown in the below image

[ghiscoding]

Can you look at the client-cli sample, it should be working and is of ESNext type.

[ayaanraj]

HI @ghiscoding , thanks for your reply, I have tried with same configurations which you have provide, I found out that, if I change

config.options.format = 'DD-MM-YYYY hh:mm';

to

config.options.format = 'DD-MM-YYYY';

it works fine and the result is as expected, but when I add time to the date this issue comes.

[ghiscoding]

Hmm the Bootstrap 4 CSS that is in there was just temporary until an official release for Bootstrap-Select to support Bootstrap 4. They currently have a beta version to try it out.

So it's probably related to the temp CSS that I have put in there to support BS4. You could try to find what is wrong with it. The temp file is here and I also had similar display issue at first.

[ayaanraj]

Haa, as you told it is some issue with style, and I have found this https://github.com/wgbbiao/bootstrap4-datetimepicker repo, i thing you might be aware of this. What I did here is, i have changed this [email protected]/src/js/bootstrap-datetimepicker.js file with js file which is provided in the bootstrap4-datetimepicker/src/js/bootstrap-datetimepicker.js and did the same for [email protected]/src/sass/_bootstrap-datetimepicker.scss and [email protected]/src/sass/bootstrap-datetimepicker-build.scss with files provided in the repo. So it works fine, but thing is that, repo code is not compatible with aurelia, so please help me out in, how can i use that repo code with aurelia, or any alternative to use aurelia-bootstrap-datetimepicker with bootstrap@4

[ghiscoding]

Can you make a PR (Pull Request) with the necessary changes to apply to the styling BS4.

Or if you can't do a PR, then at least let me know of which code to change in that same styling BS4.

[ghiscoding]

I made a quick fix, it's not totally fix but it will get you going (see below).

I don't think I can fix the remaining issue without javascript changes to the core of the external library. The remaining issue, which isn't that big of deal, is that the date picker doesn't hide away after clicking on the time picker. I cannot switch to your recommended bootstrap4-datetimepicker since it will probably break people which still use Bootstrap 3 and I still want to support it for a while.