web-dev-qa-db-fra.com

Calendrier non affiché dans Bootstrap datetimepicker

J'implémente bootstrap datetimepicker avec le code ci-dessous:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker1">
                    <input type="text" class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

J'ai inclus ci-dessous des scripts et des styles:  Files included

Et ma sortie ressemble à celle ci-dessous:  Output on page

L'ordre d'inclusion de fichiers est:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/Styles/PreLayout.css")

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/moment")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/Scripts/JavaScripts/PreLayout.js")

Lorsque je clique sur l'icône du calendrier, rien ne se passe. Quelle erreur je fais dans la mise en œuvre?

MODIFIER:

Fiddler ajouté: http://jsfiddle.net/1c1nr9sp/4/

javascriptjquerycsstwitter-bootstrapdatetimepicker
4
ATP

La cause de votre problème est que vous n'avez pas placé les scripts de référence dans le bon ordre.

Voir la documentation: http://eonasdan.github.io/bootstrap-datetimepicker/Installing/

$('#datetimepicker1').datetimepicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        
    </div>
</div>

9
Vimalan Jaya Ganesh

En ce qui concerne l'espacement gaché entre l'icône de la zone de texte et du calendrier, j'ai pu résoudre ce problème en commentant la ligne:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

Mon projet gère cela pour moi à la place. ASP.net/MVCJ'ai aussi changé le col-sm-6 en col-sm-12.

1
JaymesG

J'ai eu des problèmes avec jQuery 3.x . (La dernière version de Bootstrap 3 prend en charge jQuery 3). La liste déroulante rendrait partiellement mais sans le calendrier. La partie sélecteur de temps a fonctionné correctement.

La mise à niveau vers jQuery 2.x corrige le problème.

0
mrrrk

Vous pouvez également vouloir vérifier quel jeu d’icônes utilisez-vous. Il existe plusieurs jeux d’icônes de police comme Font Awesome, Material Design, Bootstrap glyphicons, etc.

Par défaut, DateTimePicker utilise Bootstrap glyphicons, mais vous pouvez spécifier vos icônes personnalisées pour tout le reste.

icons:{
            time: 'glyphicon glyphicon-time',
            date: 'glyphicon glyphicon-calendar',
            up: 'glyphicon glyphicon-chevron-up',
            down: 'glyphicon glyphicon-chevron-down',
            previous: 'glyphicon glyphicon-chevron-left',
            next: 'glyphicon glyphicon-chevron-right',
            today: 'glyphicon glyphicon-screenshot',
            clear: 'glyphicon glyphicon-trash',
            close: 'glyphicon glyphicon-remove'
        }

Ref- http://eonasdan.github.io/bootstrap-datetimepicker/Options/#icons

0
Swaps

Problème similaire mais solution différente

C'est spécifique aux projets ASP.NET Core. Dans le modèle Visual Studio par défaut, , Toutes les balises d’entrée sont définies avec une largeur maximale de 280 pixels comme suit:

fichier: site.css 

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

Il suffit de supprimer cela et l'icône du calendrier se met au bon endroit :)

0
Fab