Bootstrap DatePicker внутри Модальный не работает

У меня этот дампинг внутри модальный, но не работает. Я уже пробовал некоторые из кодов, которые я видел на форуме, но никто из них не работает. Может ли это быть проблемой javascript? Я не уверен, что делает его не показывать DatePicker, кто может помочь мне, пожалуйста, спасибо Bootstrap DatePicker внутри Модальный не работает

<script> 
 
$(document).ready(function() { 
 
    $('#datePicker') 
 
     .datepicker({ 
 
      format: 'mm/dd/yyyy' 
 
     }) 
 
     .on('changeDate', function(e) { 
 
      // Revalidate the date field 
 
      $('#eventForm').formValidation('revalidateField', 'date'); 
 
     }); 
 

 
    $('#eventForm').formValidation({ 
 
     framework: 'bootstrap', 
 
     icon: { 
 
      valid: 'glyphicon glyphicon-ok', 
 
      invalid: 'glyphicon glyphicon-remove', 
 
      validating: 'glyphicon glyphicon-refresh' 
 
     }, 
 
     fields: { 
 
      name: { 
 
       validators: { 
 
        notEmpty: { 
 
         message: 'The name is required' 
 
        } 
 
       } 
 
      }, 
 
      date: { 
 
       validators: { 
 
        notEmpty: { 
 
         message: 'The date is required' 
 
        }, 
 
        date: { 
 
         format: 'MM/DD/YYYY', 
 
         message: 'The date is not a valid' 
 
        } 
 
       } 
 
      } 
 
     } 
 
    }); 
 
}); 
 
</script>

<div class="form-group"> 
 
     <label class="col-xs-3 control-label">Date</label> 
 
     <div class="col-xs-5 date"> 
 
      <div class="input-group input-append date" id="datePicker"> 
 
       <input type="text" class="awe-calendar" name="date" /> 
 
       <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> 
 
      </div> 
 
     </div> 
 
    </div>

источник

2015-09-25 Kim Ocampo Octaviano

нагрузку, '' jquery' и bootstrap.min.js' в конце тела тега –

я уже загрузить его в конце тела тега. –

датапикер работает, но отображается над полем ввода –

добавить Z-индекс выше 1051 в классе DatePicker

добавить что-то вроде это на странице или css

<style> 
    .datepicker{z-index:1151 !important;} 
</style>

источник

2015-09-25 09:32:51 SjaakvBrabant

Все еще не работает :( –

У вас возникли какие-либо ошибки в вашей консоли? – SjaakvBrabant

У меня нет ошибок :( –

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

Пожалуйста, добавьте чуть выше из

DIV модель-тела

<script> 
     $(document).on("click", ".modal-body", function() { 
     $("#datepicker").datepicker({ 
     dateFormat: 'yy-mm-dd'          
     }); 
      }); 
    </script> 
<div class="modal-body">

источник

2016-08-03 11:41:17

как сделать, если я использую готовый? – newbie

Я сделал пример приложения для, чтобы показать его. Его работа прекрасна

<!DOCTYPE html> 
<html> 
<head> 
    <title>The Date</title> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
    <script> 
     $(function() { 
      $('#datetimepicker1').datepicker({ 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="container"> 
     <div class="">&nbsp;</div> 
     <!-- Button trigger modal --> 
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
      Launch demo modal 
     </button> 
    </div> 
    <!-- Modal --> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="myModalLabel">Pick your Date</h4> 
       </div> 
       <div class="modal-body"> 
        <input id="datetimepicker1" type="text" class="form-control" /> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

источник

2016-08-03 12:01:41

Измените идентификатор входного тега на datepicker, это может сработать.

источник

2017-07-26 05:16:23

добавить следующее:

$('#datePicker') 
    .datepicker({ 
     format: 'mm/dd/yyyy', 
     beforeShow: function() { 
       setTimeout(function() { 
        $('.ui-datepicker').css('z-index', 99999); 
       }, 0); 
      } 
    }) 
    .on('changeDate', function(e) { 
     // Revalidate the date field 
     $('#eventForm').formValidation('revalidateField', 'date'); 
    });

источник

2018-01-25 03:35:47 Nurkartiko

Bootstrap DatePicker внутри Модальный не работает

ответ

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