Я реализую самозагрузки DateTimePicker с ниже код:календарь не отображается в Bootstrap DateTimePicker

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <div class="form-group"> 
       <div class="input-group date" id="datetimepicker1"> 
        <input type="text" class="form-control" /> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Я включил ниже скриптов и стилей:

И мой выход выглядит, как показано ниже:

Порядок включения файлов:

@Styles.Render("~/Content/css") 
@Styles.Render("~/Content/Styles/PreLayout.css") 

@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryui") 
@Scripts.Render("~/bundles/moment") 
@Scripts.Render("~/bundles/bootstrap") 
@Scripts.Render("~/Scripts/JavaScripts/PreLayout.js")

Когда я нажимаю значок календаря, ничего не происходит. Какую ошибку я делаю в реализации?

EDIT:

Добавлено скрипача: http://jsfiddle.net/1c1nr9sp/4/

источник

2015-07-24 ATP

Вы добавили bootstrap datepicker js file? и добавить ссылку? –

На самом деле очень полезно предоставить рабочий пример для людей (например, фрагмент или скрипку), поэтому нам легко увидеть и исправить вашу проблему.В противном случае нам нужно было бы настроить всю среду и получить сами библиотеки, чтобы убедиться, что наше решение работает, в котором большинство людей предпочитают не тратить время. [Создание легко воспроизводимого примера может помочь получить ответ] (http://stackoverflow.com/help/mcve). –

@ZohaibWaqar Я добавил bootstrap-datetimepicker.min.js. – ATP

Причиной вашего вопроса, вы не Приложите скрипты в правильном порядке.

Смотрите документацию: http://eonasdan.github.io/bootstrap-datetimepicker/Installing/

$('#datetimepicker1').datetimepicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class='col-sm-6'> 
 
      <div class="form-group"> 
 
       <div class='input-group date' id='datetimepicker1'> 
 
        <input type='text' class="form-control" /> 
 
        <span class="input-group-addon"> 
 
         <span class="glyphicon glyphicon-calendar"></span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
    </div> 
 
</div>

источник

2015-07-24 04:54:22

Спасибо Vimalan. Я заменил свой bootstrap datetime js и css тем, что был в ссылке вашего ответа, и это сработало. Теперь я вижу календарь. Но все же я считаю, что селектор искажен, как указано в снимке в моем вопросе. Можете ли вы предложить причину этого? – ATP

@ATP, я не могу воспроизвести проблему с искаженным селектором ... может быть одна причина: css .form-control может быть переопределен где-то в ваших других файлах css ... Это будет полезно, если вы сможете обновить скрипач что отражает проблему? –

Даже я не могу воспроизвести это в скрипаче. Похоже на проблему с локальной системой. Спасибо за помощь. :) – ATP

Вы также можете захотеть, чтобы проверить, какой значок посаженные вы используете. Есть несколько наборов иконок шрифта как Font Awesome, Material Design, Bootstrap glyphicons и т.д.

По умолчанию DateTimePicker использует Bootstrap glyphicons, но вы можете указать свои собственные иконки для всех других вещей.

icons:{ 
      time: 'glyphicon glyphicon-time', 
      date: 'glyphicon glyphicon-calendar', 
      up: 'glyphicon glyphicon-chevron-up', 
      down: 'glyphicon glyphicon-chevron-down', 
      previous: 'glyphicon glyphicon-chevron-left', 
      next: 'glyphicon glyphicon-chevron-right', 
      today: 'glyphicon glyphicon-screenshot', 
      clear: 'glyphicon glyphicon-trash', 
      close: 'glyphicon glyphicon-remove' 
     }

rEF- http://eonasdan.github.io/bootstrap-datetimepicker/Options/#icons

источник

2017-03-29 10:20:17 Swaps

Что касается перепутались расстояния между текстовым полем и значок календаря, я был в состоянии исправить это закомментировать строку:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

Мой проект ручки это для меня. ASP.net/MVC Я также изменил col-sm-6 на col-sm-12.

источник

2017-07-24 17:48:57 JaymesG

Аналогичная проблема, но различное решение

Это специфично для проектов ASP.NET Core. В умолчанию визуальный шаблон студии, все входные метки устанавливаются с максимальной шириной 280 пикселей, как это:

файл:site.css

/* Set widths on the form inputs since otherwise they're 100% wide */ 
input, 
select, 
textarea { 
    max-width: 280px; 
}

Просто удалить, что и значок календаря помещается в в нужном месте :)

источник

2017-09-02 06:45:26 Fab

календарь не отображается в Bootstrap DateTimePicker

ответ

Аналогичная проблема, но различное решение

Смежные вопросы