dt-picker не влазит в блок после открытия

Как сделать, чтобы при открытии ДТ-пиккер влазил нормально?? только с помощью js???

$(document).ready(function(){
				
				
				$('[id^=datetimepicker]').datetimepicker();
				$("#archivePayments").modal("show");
				
				});
<?php 
    session_start();
    
    
    if (!isset($_SESSION['user'])) 
    {
        header("Location: );
    }
?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css">
	</head>
    <body>
      
		
		<!-- Modal -->
		  <div class="modal fade p-0" id="archivePayments" tabindex="-1" role="dialog" aria-labelledby="confirmPhoneTitle" aria-hidden="true">
			 <!-- <div class="modal-dialog-centered col-11 col-md-8 px-0 mx-auto" role="document"> -->
			 <div class="modal-dialog-centered modal-dialog modal-lg modal-dialog-scrollable" role="document">
				<div class="modal-content">
				   <div class="modal-header">
					  <h5 class="modal-title" id="archivePaymentsTitle">Архів платежів</h5>
				   </div>
				   <div class="modal-header" >
					  <div class="form-row w-100">
					  <div class="col-12 col-lg">
						 <div class="form-group">
							<div class="input-group date" id="datetimepicker_start" data-target-input="nearest">
								<div class="input-group-prepend">
							  <div class="input-group-text">З</div>
							</div>
							  <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker_start" data-toggle="datetimepicker" />
							  <div class="input-group-append" data-target="#datetimepicker_start" data-toggle="datetimepicker">
								<div class="input-group-text"><i class="fa fa-calendar"></i></div>
							  </div>
							</div>
						  </div>
						  </div>
						  <div class="col-12 col-lg">
						   <div class="form-group">
							<div class="input-group date" id="datetimepicker_finish" data-target-input="nearest">
							<div class="input-group-prepend">
							  <div class="input-group-text">До</div>
							</div>
							  <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker_finish" data-toggle="datetimepicker" />
							  <div class="input-group-append" data-target="#datetimepicker_finish" data-toggle="datetimepicker">
								<div class="input-group-text"><i class="fa fa-calendar"></i></div>
							  </div>
							</div>
						  </div>
						   </div>
					  </div>
				   </div>
				   <div class="modal-body" >
					  
				   </div>
				</div>
			 </div>
		  </div>
		
		
		
		
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> 
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
		<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script>

    </body>
</html>


Ответы (0 шт):