bootstrap-bootstrap 4 的日期时间选择器

bootstrap-datetimepicker for bootstrap 4

我想将 bootstrap-datetimepicker 与 bootstrap 4 一起使用,但我遇到了一些问题。

为此,我更改了如下内容:

  1. pull-rightfloat-right
  2. table-condensedtable-sm
  3. glyphiconsfontawesome

但是没有用:(

Demo

谁能帮我把这个项目转换成新的 bootstrap 版本?

我用 Bootstrap4 没问题,你的问题是什么? (抱歉我的英语不好:')

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

DEMO

@Stéphanie 你的演示弥补了简短的英文解释。谢谢!

对于可能需要解决此问题的任何其他人,这里有一个非常具体的说明:(全部基于下面@Stéphanie 的回答 - 查看她的演示。) 代码中需要查找的字符串有四个:

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

并在每种情况下将 in 替换为; show 这样它就会像下面这样。保存文件,日历应该可以工作了。祝你好运!

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

我们已经制作了一个带有详细文档的修复程序的分支:

分叉存储库:

用法:

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'
            }
        });
    }
});

学分:

感谢Eonasdan for the awesome library. Thanks to 非良 (wgbbiao) for their fork too. Thanks to Camille Anelli's blog关于图标的提醒。