Bootstrap-Datetimepicker Funktioniert nicht

Ich habe das seit 2 Tagen gesehen, und kann nicht herausfinden, was ich falsch mache.Bootstrap-Datetimepicker Funktioniert nicht

Hier ist eine Geige mit meinem Projekt. http://jsfiddle.net/dagger2002/RR4hw/

Hier ist der HTML

<div class="container"> 
    <div class="col-sm-6" style="height:75px;"> 
     <div class='col-md-5'> 
      <div class="form-group"> 
       <div>Start</div> 

       <div class='input-group date' id='startDate'> 
        <input type='text' class="form-control" name="startDate" /> 
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <div class='col-md-5'> 
      <div class="form-group"> 
       <div>End</div> 

       <div class='input-group date' id='endDate'> 
        <input type='text' class="form-control" name="org_endDate" /> 
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Hier ist die JQuery.

Ich bekomme keine Fehler und wenn ich es durch Fiddle renne sagt es keine Fehler gefunden. Ich bin neu bei jQuery, also bin ich mir nicht sicher, was ich falsch mache.

Oh ja. Ich benutze einen langen Namen, der in eine Joomla-Seite geht, die auch Moo-Tools verwendet.

Vielen Dank im Voraus.

UPDATE

<!doctype html> 

<html lang="en-gb"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <meta name="x-ua-compatible" content="IE=edge,chrome=1" /> 
     <title>DateTime Test</title> 

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 


     <!-- Style Sheets --> 
     <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" type="text/css" /> 
     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" /> 

     <!-- Scripts --> 
     <script src="//ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script> 
     <script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script> 

     <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js" type="text/javascript"></script> 
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js" type="text/javascript"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js" type="text/javascript"></script> 
     <script> 
      jQuery.noConflict(); 
     // Code that uses other library's $ can follow here. 
     </script> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="col-sm-6" style="height:75px;"> 
       <div class='col-md-5'> 
        <div class="form-group"> 
         <div>Start</div> 

         <div class='input-group date' id='startDate'> 
          <input type='text' class="form-control" name="startDate" /> 
          <span class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span> 
          </span> 
         </div> 
        </div> 
       </div> 
       <div class='col-md-5'> 
        <div class="form-group"> 
         <div>End</div> 

         <div class='input-group date' id='endDate'> 
          <input type='text' class="form-control" name="org_endDate" /> 
          <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
          </span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Diese jFiddle funktioniert. http://jsfiddle.net/RR4hw/11/

Aber wenn ich es in eine reguläre Seite integriere, bricht es. Nicht sicher, was ich vermassle.

Vielen Dank im Voraus.

Quelle

2014-04-03 dagger2002

Es schien einige Probleme mit den externen Ressourcen in Ihrem jsFiddle zu geben.

Ich habe aktualisiert jsFiddle zu arbeiten. Ich habe die externen Ressourcen geändert und kleinere Anpassungen am Code vorgenommen.

HTML

<div class="container"> 
    <div class="col-sm-6" style="height:75px;"> 
     <div class='col-md-5'> 
      <div class="form-group"> 
       <div>Start</div> 

       <div class='input-group date' id='startDate'> 
        <input type='text' class="form-control" name="startDate" /> 
        <span class="add-on"> 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
     </span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <div class='col-md-5'> 
      <div class="form-group"> 
       <div>End</div> 

       <div class='input-group date' id='endDate'> 
        <input type='text' class="form-control" name="org_endDate" /> 
        <span class="add-on"> 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
     </span> 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

JAVASCRIPT

jQuery(function() { 
    jQuery('#startDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' }); 
    jQuery('#endDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' }); 
    jQuery("#startDate").on("dp.change",function (e) { 
     jQuery('#endDate').data("DateTimePicker").setMinDate(e.date); 
    }); 
    jQuery("#endDate").on("dp.change",function (e) { 
     jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date); 
    }); 
});

UPDATE

In Ihrem jsFiddle, Sie verweisen „Bootstrap-datepicker.m in.js "und nicht" bootstrap-datetimepicker.min.js ".
es scheint, dass "bootstrap-datepicker.min.js" benötigt "moment.js" als Voraussetzung. Bitte beachten Sie, dass die Reihenfolge der Includes wichtig ist.
Schließlich muss "en-gb.js" nach "bootstrap-datetimepicker.min.js" aufgeführt werden.

Aktualisiert jsFiddle mit funktionierender Lösung.

Quelle

2014-04-03 19:22:55 malkassem

Was hast du ändern? auf den externen. Ich sehe, dass Sie das Format in jQuery hinzugefügt haben. Ist das alles? – dagger2002

Ich verwendete verschiedene URLs von dem, was Sie hatten. gleiche Dateinamen, aber verschiedene URLs. – malkassem

Danke für die Hilfe. Ich habe gerade festgestellt, dass Sie es von Bootstrap 3.1 zu Bootstrap 2.2 geändert haben. Das funktioniert nicht, da meine Seite Bootstrap 3 verwendet. Die von mir verwendete Zeitskriptversion arbeitet mit Bootstrap 3. – dagger2002

Script include Reihenfolge in jsFiddle funktioniert nicht, unten ist die modifizierte Reihenfolge für praktikable Beispiel. Wie von @malkassem vorgeschlagen, ist moment.js erforderlich, damit die Bootstrap-Datumsauswahl funktioniert.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>   
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js"></script>     
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>`

Quelle

2015-03-10 04:56:36 Jeevanantham

Der einfachste Weg, Datum und/oder Zeitauswahl Funktion zu erhalten ist durch

Install-Package Bootstrap.v3.Datetimepicker.CSS

unten Paket installieren und dann installierten Dateien in _Layout Referenz

<!-- JS --> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/bootstrap.min.js"></script> <!-- Bootstrap v3.3.5 --> 
<script src="~/Scripts/moment.js"></script> 
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script> 
<script src="~/Scripts/Core.js"></script>

und fügen Sie dann unter Skript zur Layoutseite vor </body> Tag

<script> 
jQuery(document).ready(function() { 

    jQuery('.datepicker').datetimepicker({ format: 'DD/MM/YYYY' }); 
    jQuery('.datetimepicker').datetimepicker(); 

}); 
</script>

in Razor Ansicht Verwendung wie unten

@Html.EditorFor(model => model.MyDate, new { htmlAttributes = new { @class = "form-control datepicker" } }) 
@Html.EditorFor(model => model.MyDateTime, new { htmlAttributes = new { @class = "form-control datetimepicker" } })

Quelle

2015-07-01 14:02:33 Moji

Bootstrap-Datetimepicker Funktioniert nicht

Antwort

Verwandte Themen