13

I want to use bootstrap-datetimepicker with bootstrap 4 but I have some problems.

For this purpose I changed something like:

  1. pull-right to float-right
  2. table-condensed to table-sm
  3. glyphicons to fontawesome

but it did not work :(

Demo

Can anyone help me for converting this project to new bootstrap version?

beaver
  • 17,333
  • 2
  • 40
  • 66
HamedFathi
  • 3,667
  • 5
  • 32
  • 72
  • 4
    [eonasdan-datetimepicker](http://eonasdan.github.io/bootstrap-datetimepicker/) does not support bootstrap v.4, the new version of the library is called [tempus dominus](https://tempusdominus.github.io/bootstrap-4/) – VincenzoC Dec 03 '17 at 16:30

3 Answers3

12

It's ok for me with Bootstrap4, what is your problem ? (sorry for my bad english :')

Edit lines with ".in"collapse to ".show" and icons

DEMO

Stéphanie Caumont
  • 152
  • 4
8

We've made a fork with the fixes with detail documentation:

Forked Repository:

Usage:

jQuery(document).ready(function($) {
    if (window.jQuery().datetimepicker) {
        $('.datetimepicker').datetimepicker({
            // Formats
            // follow MomentJS docs: https://momentjs.com/docs/#/displaying/format/
            format: 'DD-MM-YYYY hh:mm A',

            // Your Icons
            // as Bootstrap 4 is not using Glyphicons anymore
            icons: {
                time: 'fa fa-clock-o',
                date: 'fa fa-calendar',
                up: 'fa fa-chevron-up',
                down: 'fa fa-chevron-down',
                previous: 'fa fa-chevron-left',
                next: 'fa fa-chevron-right',
                today: 'fa fa-check',
                clear: 'fa fa-trash',
                close: 'fa fa-times'
            }
        });
    }
});

Credits:

Thanks to Eonasdan for the awesome library. Thanks to 非良 (wgbbiao) for their fork too. Thanks to Camille Anelli's blog for the reminder about the icons.

Mayeenul Islam
  • 4,532
  • 5
  • 49
  • 102
5

@Stéphanie your demo more than made up for the short English explanation. Thanks!

For anyone else that might need to solve this, here go a very specific directions: (All based on @Stéphanie's answer below - checkout her demo.) There are four strings you need to search in the code:

"collapse in":"
g=f.find(".in")
.collapse:not(.in)
(g.removeClass("in"),h.addClass("in")

and in each case replace   in   with;   show   so that it will look like the following. Save the file and the calendar should work. Good luck!

"collapse show":"
g=f.find(".show")
.collapse:not(.show)
(g.removeClass("show"),h.addClass("show")

AlexGM
  • 168
  • 1
  • 9