Datepicker nicht zeigen - Bootstrap

So ist dies die markup der datepicker:

      <div class="form-group row">
        <div class="col-xs-3 col-md-offset-9">
          <label class="control-label">Pick Date</label>
          <div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
            <input class="form-control" type="text" readonly="" value="12-02-2012">
            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
          </div>
        </div>
      </div>

Tatsächlich sieht es so aus:

Datepicker nicht zeigen - Bootstrap

Jedoch, wenn ich auf das Kalender-Symbol gibt es keine table-look-a-like Datumsauswahl zeigt.
Ich habe den folgenden css-und js:

    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/datepicker.css" rel="stylesheet">
    <script type="text/javascript"src="js/jquery-2.0.3.js"></script>
    <script type="text/javascript"src="js/bootstrap.js"></script>
    <script type="text/javascript"src="js/bootstrap-datepicker.js"></script>

Ich auch genannt habe, die Funktion auf <head></head> und am Ende der <body></body> nur um sicher zu gehen. Aber, noch keine Antwort, wenn ich auf die Schaltfläche klicke.

    <script type="text/javascript">
      $(document).ready(function() {
       $("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});

      $(window).on('load',function(){
       $("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});

    </script>

Ich mich geändert habe einige CSS-JS-code da die Bootstrap 3 aktualisiert-code, Quelle: http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/

So, ich möchte eine Tabelle-look-a-like datepicker, wenn ich auf die Schaltfläche Kalender. Keine Hilfe? Danke.

  • Ich habe gerade realisiert das Update aus kenyontechnology.com mich, und es funktioniert gut. Sind alle Ihre Dateien gefunden wird? Gibt es irgendwelche Fehler-Konsole?
  • Das problem ist vielleicht, dass Sie anrufen $('#dp3').datepicker() zweimal.
  • Ich habe versucht, und schließlich fand ich das problem. Das problem ist, ich habe jquery.js die möglicherweise stören jquery-2.0.3.js. Nachdem ich entfernt jquery.js voila es funktioniert. Vielen Dank für die Hilfe bro
  • nach Ihrer Implementierung ist die Eingabe von text verändert, wenn Sie irgendwelche Daten auf den datepicker?
  • Eine gute Idee wäre, jetzt diese Frage beantworten mit der Antwort, oder alternativ entfernen Sie die Frage, da es jetzt geklärt ist.
InformationsquelleAutor noobprogrammer | 2013-12-04
  1. 3

    Ich lief in ein ähnliches Problem - in meinem Fall in der jQuery-Verkabelung $('#someid').datepicker() 'someid' war die id der 'input' - und wo es gewesen sein sollte, der div-container. das bedeutet - es funktionierte, wenn Sie auf das Eingabefeld, aber nicht die glyphicon-Taste.

    Habe ich eine Arbeitskopie, an der Geige ist hier :
    jsfiddle

    Dem jsfiddle code ist hier : (Hinweis: der Verweis auf die jQuery-2.0.2 und auch die externen reosurces Registerkarte in jsFiddle-editor)

       http://jsfiddle.net/Lro8kxjx/6/

<div class="col-xs-6 ">
<div class="form-group ">
    <div class='input-group date' id='datepicker'>
        <input type="text" id="processdate" class="form-control" placeholder="Processing Date..." name="processdate" /> <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
    </div>
</div>

    $(document).ready(function () {
$('#datepicker').datepicker({
    startDate: '-180d',
    endDate: '+1d',
    autoclose: true
});  });
    InformationsquelleAutor JustE
Schreibe einen Kommentar