web-dev-qa-db-fra.com

bootstrap-datetimepicker pour bootstrap 4

Je veux utiliser bootstrap-datetimepicker avec bootstrap 4 mais j'ai quelques problèmes.

Pour cela, j'ai changé quelque chose comme:

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

mais cela n'a pas fonctionné :(

Démo

Quelqu'un peut-il m'aider à convertir ce projet en nouvelle version bootstrap?

javascriptjquerytwitter-bootstrapbootstrap-4bootstrap-datetimepicker
2
HF_67

C'est bon pour moi avec Bootstrap4, quel est votre problème? (Désolé pour mon mauvais anglais :')

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

DÉMO

4
Stéphanie Caumont

Travaillé pour moi aussi! Le fichier à modifier est le bootstrap-datetimepicker.min.js à propos.

NOTE: Vous pouvez remplacer les glyphicons manquants pour la navigation en utilisant 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

@ Stéphanie, ta démo a plus que compensé la courte explication en anglais. Merci!

Pour ceux qui voudront peut-être résoudre ce problème, voici des instructions très spécifiques: (Toutes basées sur la réponse de @ Stéphanie ci-dessous - consultez sa démo.) Vous devez rechercher le code dans quatre chaînes:

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

et dans chaque cas remplacer in with; show pour que cela ressemble à ce qui suit. Enregistrez le fichier et le calendrier devrait fonctionner. Bonne chance!

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

0
AlexGM