Javascript bootstrap 4 的 bootstrap-datetimepicker

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/47618134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:53:12  来源:igfitidea点击:

bootstrap-datetimepicker for bootstrap 4

javascriptjquerytwitter-bootstrapbootstrap-4bootstrap-datetimepicker

提问by HamedFathi

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

我想在bootstrap 4 中使用bootstrap-datetimepicker,但我有一些问题。

For this purpose I changed something like:

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

  1. pull-rightto float-right
  2. table-condensedto table-sm
  3. glyphiconsto fontawesome
  1. pull-rightfloat-right
  2. table-condensedtable-sm
  3. glyphiconsfontawesome

but it did not work :(

但它没有用:(

Demo

演示

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

任何人都可以帮助我将此项目转换为新的引导程序版本吗?

采纳答案by Mayeenul Islam

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 Eonasdanfor the awesome library. Thanks to 非良 (wgbbiao) for their fork too. Thanks to Camille Anelli's blogfor the reminder about the icons.

感谢Eonasdan提供了很棒的图书馆。也感谢非良 ( wgbbiao) 的叉子。感谢Camille Anelli 的博客对图标的提醒。

回答by Stéphanie Caumont

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

我用 Bootstrap4 没问题,你有什么问题?(对不起,我的英语不好 :')

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

DEMO

演示

回答by AlexGM

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

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

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:

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

"collapse in":"
g=f.find(".in")
.collapse:not(.in)
(g.removeClass("in"),h.addClass("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")

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