web-dev-qa-db-ja.com

bootstrap 4のbootstrap-datetimepicker

bootstrap-datetimepicker with bootstrap 4を使用しますが、いくつかの問題があります。

この目的のために、次のようなものを変更しました。

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

しかし、それは動作しませんでした:(

デモ

このプロジェクトを新しいbootstrap=バージョンに変換するために誰でも私を助けることができますか？

javascriptjquerytwitter-bootstrapbootstrap-4bootstrap-datetimepicker
6
HamedFathi

詳細なドキュメントを含む修正を加えてフォークを作成しました。

フォークされたリポジトリ：

使用法：

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 に感謝します。フォークも非良（wgbbiao）に感謝します。 Camille Anelliのブログ に感謝します。

2
Mayeenul Islam

Bootstrap4では問題ありませんが、問題は何ですか？ （私の悪い英語を申し訳ありません： '）

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

[〜＃〜] demo [〜＃〜]

10
Stéphanie Caumont

@Stéphanieは英語の短い説明を補ってくれました。ありがとう！

これを解決する必要があるかもしれない他の人のために、ここで非常に具体的な指示に進んでください：（すべて以下の@Stéphanieの回答に基づいています-彼女のデモをチェックしてください。）コードで検索する必要がある4つの文字列があります：

「崩壊」：」
g = f.find（ "。in"）
。collapse：not（.in）
（g.removeClass（ "in"）、h.addClass（ "in"）

そして、それぞれの場合にinを; showこれにより、次のようになります。ファイルを保存すると、カレンダーが機能するはずです。がんばろう！

「折りたたみショー」：」
g = f.find（ "。show"）
。collapse：not（.show）
（g.removeClass（ "show"）、h.addClass（ "show"）

3
AlexGM

私のためにも働いた！編集するファイルはbootstrap-datetimepicker.min.jsです。

注： font-awesomeを使用して、ナビゲーション用に不足しているグリフィコンを置き換えることができます。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" aria-describedby="img-addon" />
                <span class="input-group-addon" id="img-addon">
                    <span class="fa fa-calendar"></span>
                </span>
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#datetimepicker1').datetimepicker({
                        icons: {
                            time: "fa fa-clock-o",
                            date: "fa fa-calendar",
                            up: "fa fa-arrow-up",
                            down: "fa fa-arrow-down",
                            next: "fa fa-arrow-right",
                            previous: "fa fa-arrow-left"
                        },
                        minDate: "10/15/2013"
                    });
                });
            </script>
        </div>
    </div>
0
H.Hilliker