Блог

Я новичок в этой области, поэтому я объясню вам, чего я пытаюсь достичь. На моей веб-странице я хочу, чтобы при нажатии кнопки отображалась всплывающая карточка, в которую я должен ввести некоторую информацию. Я использую bootstrap в моем текущем проекте. Итак, что я нашел до сих пор, так это использование модала. Итак, когда всплывает карточка, нужно заполнить несколько полей (простые строки) и выбрать дату. Перейдя к коду, который я до сих пор:

 <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-lg btn-warning addButton" data-toggle="modal" data-target="#myModal">New Employee</button>
 <!-- Modal -->
 <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-sm">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">amp;times;</button>
                    <h4 class="modal-title">New FRISS employee</h4>
                </div>
                <div class="modal-body">

                    <input type="text" class="form-control insertInfo" placeholder="Name" />
                    <input type="text" class="form-control insertInfo" placeholder="Surname" />
                    <input type="text" class="form-control insertInfo" placeholder="Date of birth" />
                    <input type="text" class="form-control insertInfo" placeholder="Role" />
                    <input type="text" class="form-control insertInfo" placeholder="Email address" />



                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
  

Первая проблема на этом этапе заключается в том, что я хотел бы изменить ширину модала (которая слишком велика). После этого мне нужна не строка в качестве даты, а средство выбора даты, и снова я нашел через bootstrap этот фрагмент кода:

 <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>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>
  

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

Либо вы не добавили ссылки cdn в css datepicker css, либо, я думаю, вы копируете и вставляете весь код datepicker вместо введенной даты рождения.

Вам не нужно копировать весь код с помощью контейнера div, только код из

 <div class='input-group date' id='datetimepicker1'>
  

Также убедитесь, что вы добавили ссылки на файлы datetimepicker css и js в свой тег head.

Вот в качестве примера использование вашего кода. Проверьте теги link и script вверху и поместите их в свой код в точно таком же порядке.

http://codepen.io/Nasir_T/pen/ALNkaK

Также для настройки ширины модального элемента. Просто добавьте класс bootstrap по умолчанию .modal-content { в свой пользовательский css-файл или на эту страницу и добавьте свойство width для его настройки.

Надеюсь, это поможет.

[Править]

По вашему запросу на интервал в комментариях: Что вам нужно было сделать, это выбрать весь контейнер каждого элемента управления и применить поля только к его верхней и нижней части. В этом случае у вас уже был добавлен класс insertInfo во входных данных, поэтому просто добавьте следующий класс в свой css-файл.

 .insertInfo {
  margin: 10px 0;
}
  

Также добавьте этот класс в datepicker div в модальном коде, поскольку он отделен от входных данных, и нам нужно применить ко всей строке datetimepicker, а не только к входным данным в ней, так что

 <div class='input-group date insertInfo' id='datetimepicker1'>
  

Я также обновил ссылку codepen, чтобы вы могли проверить, работает ли она там. Удачного кодирования 🙂

просто добавьте id=»datetimepicker1″ в ваше поле ввода

и добавьте этот код java script в конце страницы

 <script>
$(document).ready(function () { 
    $('#datetimepicker1').datetimepicker(
    { 
            autoclose: true,
            //startDate : today,
            //endDate:today,
            format: "mm-dd-yyyy",
            minView:2
     })
        .on('click', function (e) {  
             setTimeout(function () {
                 $('#datetimepicker1').focus();
             }, 10);
        });           
})
</script>