Bootstrap-Datetimepicker не работает

Я смотрю на это в течение 2 дней, и не могу понять, что я делаю неправильно.

Вот скрипка с моим проектом. http://jsfiddle.net/dagger2002/RR4hw/

Вот 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>

Вот 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);
    });
});

Я не получаю ошибок, и когда я запускаю его через скрипку, он говорит, что ошибок не обнаружено. Я новичок в jQuery, поэтому не знаю, что делаю не так.

Ах, да. Я использую длинное имя для входа на сайт joomla, который также использует инструменты moo.

Заранее спасибо.

ОБНОВИТЬ

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

Этот jFiddle работает. http://jsfiddle.net/RR4hw/11/

Но когда я включаю его в обычную страницу, он ломается. Не уверен, что я путаю.

Заранее спасибо.


jquery twitter-bootstrap-3 bootstrap-datetimepicker
person dagger2002    schedule 03.04.2014    source источник

Ответы (4)


arrow_upward
10
arrow_downward

Кажется, были некоторые проблемы с внешними ресурсами в вашем jsFiddle.

Я обновил jsFiddle, чтобы он работал. Я изменил внешние ресурсы и внес небольшие коррективы в код.

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);
    });
});

ОБНОВЛЕНИЕ

  • В вашем jsFiddle вы ссылаетесь на «bootstrap-datepicker.min.js», а не на «bootstrap-datetimepicker.min.js».
  • кажется, что «bootstrap-datepicker.min.js» требует «moment.js» в качестве предварительного условия. Обратите внимание, что порядок включает в себя вопрос.
  • Наконец, «en-gb.js» должен быть указан после «bootstrap-datetimepicker.min.js».

Обновлен jsFiddle с рабочим решением.

person malkassem    schedule 03.04.2014
comment
Что вы изменили? на экстерьерах. Я вижу, вы добавили формат в файл jQuery. В том, что все? - person dagger2002; 04.04.2014
comment
Я использовал другие URL-адреса, отличные от ваших. одинаковые имена файлов, но разные URL-адреса. - person malkassem; 04.04.2014
comment
Спасибо за помощь. Я только что понял, что вы изменили его с bootstrap 3.1 на bootstrap 2.2. Это не сработает, так как мой сайт использует bootstrap 3. Версия сценария времени, которую я использовал, работает с bootstrap 3. - person dagger2002; 04.04.2014
comment
Я все еще не могу заставить его работать. Вне jFiddle. Я обновлю код выше. - person dagger2002; 05.04.2014
comment
Думаю, мне следует добавить скрипт даты и времени внизу. Спасибо за помощь. - person dagger2002; 07.04.2014
comment
Спасибо малкасем! Я не знал порядок js-скриптов в jsfiddle. Как и в реальной разработке, я думаю. - person duyn9uyen; 11.04.2014

arrow_upward
6
arrow_downward

Порядок включения скрипта в jsFiddle не работает, ниже приведен измененный порядок для работоспособного образца. Как было предложено @malkassem, для работы средства выбора даты начальной загрузки требуется moment.js.

<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>`
person Jeevanantham    schedule 10.03.2015

arrow_upward
0
arrow_downward

Самый простой способ заставить работать средство выбора даты и / или времени - установить пакет ниже

Install-Package Bootstrap.v3.Datetimepicker.CSS

а затем ссылаться на установленные файлы в _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>

а затем добавьте приведенный ниже скрипт на страницу макета перед тегом </body>

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

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

});
</script>

в представлении Razor используйте, как показано ниже

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

arrow_upward
0
arrow_downward

Для тех, кто использует файл _Layout.cs ASP MVC по умолчанию, удалите этот импорт сценария внизу или поместите его вверху.

Scripts.Render("~/bundles/jquery")
Scripts.Render("~/bundles/bootstrap")
person j-j    schedule 10.04.2020