Проблема с группой ввода в ячейке td

Я пытаюсь поместить средство выбора даты начальной загрузки под ячейку td, я использовал приведенный ниже html-код:

<td>
  <div class = "input-group date">
    <input type = "text" class = "form-control datePicker">
    <span class = "input-group-addon">
       <span class = "glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</td>

Результат выглядит так: Проблема с группой ввода в ячейке td

Большой! Какой у тебя вопрос?

— 10.04.2018 04:32

@ObsidianAge Эээээ, я имею в виду, что это должно быть не так, да? У текстового поля ввода неправильная высота, и между ним и глификоном есть зазор.

— 10.04.2018 04:35

@NJUHOBBY был бы признателен, если бы вы тоже проголосовали за. Ваше здоровье

— 10.04.2018 06:27

html twitter-bootstrap

10.04.2018 04:28

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

488

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

    		<script type = "text/javascript" src = "//code.jquery.com/jquery-2.1.1.min.js"></script>
    		<script type = "text/javascript" src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    			<script src = "//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    			<script src = "//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
    <script>
     $(function () {
                $('#datetimepicker1').datetimepicker();
            });
    </script>

  <p>You can try this</p>
    <link rel = "stylesheet" type = "text/css" media = "screen" href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
            <link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
            <link href = "./css/prettify-1.0.css" rel = "stylesheet">
    <link href = "//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/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>

Демо

10.04.2018 04:50

Ответ принят как подходящий

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

$(function() {
  $('#datetimepicker1').datetimepicker();
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" media = "screen" href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href = "./css/prettify-1.0.css" rel = "stylesheet">
<link href = "//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel = "stylesheet">

<table>
  <tr>

    <td>
      Sample cell
    </td>
    <td>
      <div class = "form-group">
        <input type='text' class = "form-control" />
      </div>
    </td>
    <td>
      <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>
    </td>
  </tr>

</table>
<script type = "text/javascript" src = "//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type = "text/javascript" src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src = "//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src = "//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

10.04.2018 05:00

Другие вопросы по теме

Отображение div при наведении курсора постоянно мерцает

.img-responseive не найден на веб-сайте Bootstrap

Ошибка при форматировании даты. Дата не является действительной

Гамбургер-меню Bootstrap не показывает панель значков, когда фон белый

Bootstrap 4 Карусель с несколькими элементами (щелкните, чтобы просмотреть все новые элементы)

Форма Django с использованием начальной загрузки

Как назвать классы div в Bootstrap, чтобы редактировать их во внешнем CSS

Свойство CSS не отражено для тега кнопки начальной загрузки

Как отключить деформацию панели навигации при изменении размера окна браузера

Событие переключения всплывающего окна начальной загрузки не работает

Проблема с группой ввода в ячейке td

Ответы 2

Другие вопросы по теме

Похожие вопросы