Bootstrap-Datetimepicker Nie działa

Patrzyłem na to przez 2 dni i nie mogę się domyślić, co robię źle.Bootstrap-Datetimepicker Nie działa

Oto skrzypce z moim projektem. http://jsfiddle.net/dagger2002/RR4hw/

Oto 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>

Oto jQuery.

jQuery(function() { 
    jQuery('#startDate').datetimepicker(); 
    jQuery('#endDate').datetimepicker(); 
    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); 
    }); 
});

Nie otrzymuję żadnych błędów, a kiedy przeprowadzam go przez skrzypce, oznacza to, że nie znaleziono żadnych błędów. Jestem nowy w jQuery, więc nie jestem pewien, co robię źle.

O tak. Używam długiej nazwy do tego na stronie joomla, która również używa narzędzi moo.

Dzięki z góry.

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>

Ten jFiddle działa. http://jsfiddle.net/RR4hw/11/

Ale kiedy włączam go do zwykłej strony, łamie się. Nie jestem pewien, co robię.

Z góry dziękuję.

Źródło

2014-04-03 dagger2002

Wygląda na to, że w twoim jsFiddle wystąpiły pewne problemy z zewnętrznymi zasobami.

Zaktualizowałem jsFiddle do pracy. Zmieniłem zasoby zewnętrzne i wprowadziłem drobne poprawki do kodu.

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

W swojej jsFiddle, można odwołać „bootstrap-datepicker.m in.js ", a nie" bootstrap-datetimepicker.min.js ".
wydaje się, że "bootstrap-datepicker.min.js" wymaga "chwili.js" jako warunku wstępnego. Należy pamiętać, że kolejność obejmuje sprawy.
Wreszcie, "en-gb.js" musi być wymienione po "bootstrap-datetimepicker.min.js".

Zaktualizowany jsFiddle z rozwiązaniem roboczym.

Źródło

2014-04-03 19:22:55 malkassem

Co zmienić? na zewnętrznych. Widzę, że dodałeś format do jQuery. Czy to wszystko? – dagger2002

Użyłem różnych adresów URL z tego, co posiadałeś. same nazwy plików, ale różne adresy URL. – malkassem

Dzięki za pomoc. Właśnie zdałem sobie sprawę, że zmieniłeś go z bootstrap 3.1 na bootstrap 2.2. To nie zadziała, ponieważ moja strona używa bootstrap 3. Wersja skryptu czasu, której używałem, działa z bootstrap 3. – dagger2002

Skrypt zawiera kolejność w jsFiddle nie działa, poniżej znajduje się zmodyfikowana kolejność dla wykonalnej próbki. Zgodnie z sugestią @malkassem plik moment.js jest wymagany do działania selektora daty ładowania.

<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>`

Źródło

2015-03-10 04:56:36 Jeevanantham

Najłatwiej dostać się do daty i/lub czasu pracy do kompletacji jest zainstalowanie poniżej pakietu

Install-Package Bootstrap.v3.Datetimepicker.CSS

a następnie odwoływać plików zainstalowanych w _Layout

<!-- 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>

a następnie dodać poniżej skryptu do strony układu przed znacznikiem </body>

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

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

}); 
</script>

w Razor widzenia zastosowania jako poniżej

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

Źródło

2015-07-01 14:02:33 Moji

Bootstrap-Datetimepicker Nie działa

Odpowiedz

Powiązane problemy