Comment réparer le style bizarre en utilisant Bootstrap 3 Datetimepicker

J'ai un problème avec le Bootstrap 3 Datetimepicker comme indiqué dans l'image ci-dessous. J'ai tout fait dans la documentation et la console est vide sans erreur.Comment réparer le style bizarre en utilisant Bootstrap 3 Datetimepicker

J'ai inclus les actifs suivants:

<link href='/assets/plugins/datepicker/css/bootstrap-datetimepicker-standalone.css' /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/nb.js"></script> 
<script src="/assets/plugins/datepicker/js/bootstrap-datetimepicker.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#event_title').datetimepicker({ 
      locale: 'nb' 
     }); 
    }); 
</script>

Et mon HTML ressemble à ceci:

<div class="form-group form-group-relative"> 
    <label>Tittel på arrangement</label> 
    <div style="position: relative;"> 
    <input type="text" class="form-control input-lg" id="event_title" name="event_title" placeholder="Tittel på arrangement"> 
    </div> 
</div>

Bootstrap est inclus dans l'en-tête. J'ai même vérifié si mon CSS personnalisé interférait avec Datetimepicker, mais j'ai enlevé tous mes CSS personnalisés pour vérifier si c'est le cas. J'ai eu le même problème sans mon style personnalisé. J'utilise Bootstrap 3.

Ce qui pourrait être le cas?

Source

2017-08-12 kanarifugl

Essayez avec inclure bootstrap-theme.css –

Vérifiez la section Installation Guides des docs:

Inclure les scripts et les styles nécessaires:

<head> 
    <!-- ... --> 
    <script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script> 
    <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script> 
    <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script> 
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" /> 
</head>

Puisque vous utilisez le style (Bootstrap. Bootstrap est inclus dans l'en-tête) vous devez utiliser bootstrap-datetimepicker.css au lieu de bootstrap-datetimepicker-standalone.css.

Voici un extrait de travail (en utilisant les ressources de CDN):

$('#event_title').datetimepicker({ 
 
    locale: 'nb' 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/nb.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 

 
<div class="form-group form-group-relative"> 
 
    <label>Tittel på arrangement</label> 
 
    <div style="position: relative;"> 
 
    <input type="text" class="form-control input-lg" id="event_title" name="event_title" placeholder="Tittel på arrangement"> 
 
    </div> 
 
</div>

Source

2017-08-12 15:36:09 VincenzoC

Comment réparer le style bizarre en utilisant Bootstrap 3 Datetimepicker

Répondre

Questions connexes