bootstrap 4的bootstrap-datetimepicker

Ham*_*thi 6 javascript jquery twitter-bootstrap bootstrap-datetimepicker bootstrap-4

我想将bootstrap-datetimepicker与bootstrap 4 一起使用,但存在一些问题。

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

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

但它没有用:(

演示版

有人可以帮助我将该项目转换为新的引导程序版本吗?

Sté*_*ont 10

Bootstrap4对我来说还可以,您的问题是什么?(对不起,我的英语不好 :')

Edit lines with ".in"collapse to ".show" and icons
Run Code Online (Sandbox Code Playgroud)

演示


May*_*lam 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'
            }
        });
    }
});
Run Code Online (Sandbox Code Playgroud)

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.


Ale*_*xGM 5

@Stéphanie 您的演示足以弥补简短的英文解释。谢谢!

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

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

并且在每种情况下取代     与;   显示   ,使其看起来如下所示。保存文件,日历应该可以工作。祝你好运!

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