Le calendrier ne s'affiche pas dans le Bootstrap datetimepicker

Je suis la mise en œuvre de 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:

Et mon résultat est à la recherche comme ci-dessous:

Afin d'inclure des fichiers est la suivante:

@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")

Quand je clique sur l'icone rien ne se passe. Quelle erreur que je fais dans la mise en œuvre?

EDIT:

Ajouté fiddler: http://jsfiddle.net/1c1nr9sp/4/

avez-vous ajouter bootstrap datepicker fichier js ? et d'ajouter une référence?
- Il vraiment utile de fournir un exemple pour les gens (comme un extrait ou violon), il est donc facile pour nous de voir et résoudre votre problème. Sinon, nous aurions pour l'installation de l'ensemble de l'environnement et d'obtenir les bibliothèques de nous-mêmes pour faire en sorte que notre solution fonctionne, dans lequel la plupart des gens préfèrent ne pas prendre le temps de le faire. créer un facilement reproductible exemple peut grandement aider à obtenir une réponse.
J'ai ajouté bootstrap-datetimepicker.min.js.
exécutez votre application et lors du chargement de la page appuyez sur la touche f12 et goto Console, puis vérifier l'erreur. puis cliquez sur le calendrier et vérifiez de nouveau l'erreur et laissez-moi savoir///
Je ne vois pas d'erreur dans l'une de actions(chargement et cliquez sur), mais encore il ne fonctionne pas.

OriginalL'auteur ATP | 2015-07-24

1

Autant que les foiré l'espacement entre la zone de texte et icône de calendrier, j'ai été en mesure de le corriger 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/MVC
J'ai aussi changé le col-sm-6 col-sm-12.

OriginalL'auteur JaymesG

Vous pourriez également vouloir vérifier ce que l'icône de l'ensemble êtes-vous à l'aide.
Il existe de multiples icône de police définit 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 toutes les autres choses.

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

OriginalL'auteur Swaps

0

Problème similaire mais différente de la solution

C'est le propre des ASP.NET les grands projets. À défaut, visual studio modèle,
toutes les balises input sont ensemble avec une largeur maximale de 280px comme ceci:

fichier: site.css
```
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}
```
Juste de le supprimer et l'icône du calendrier s'adapte à la bonne place 🙂

OriginalL'auteur Fab
0

J'ai eu des problèmes à l'aide de jQuery 3.x. (dernière version de Bootstrap 3 prend en charge jQuery 3). Le menu déroulant partiellement rendu mais sans le calendrier. Le temps de sélecteur partie travaillé sur ok.

La rétrogradation à la jQuery 2.x résolu le problème.

Donc il n'y a aucun espoir de le faire fonctionner avec jQuery 3.x? J'ai dû mettre à jour jQuery pour utiliser une autre bibliothèque et ce qui s'est passé...
il fonctionne bien sur les 3.x

OriginalL'auteur mrrrk

Vous devez vous connecter pour publier un commentaire.

Problème similaire mais différente de la solution