팝업에서 인라인으로 부트 스트랩 datepicker를 만듭니다.

Question

this datepicker를 사용했는데 정상적으로 작동하지만 갑자기 튀어 나온이 datepicker의 내용을 <div>에 표시하는 방법을 찾을 수 없습니다.

는 는

내 코드 :

는

<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy"> 
    <input class="form-control" type="text" readonly /> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
</div> 

<script type="text/javascript"> 
    jQuery(function() { 
    jQuery("#datepicker").datepicker({ 
     startDate: new Date(), 
     minDate: 0, 
     language: "fr", 
     autoOpen: true, 
     autoclose: true, 
     todayHighlight: true 
    }).datepicker('update', new Date()); 
    }); 
</script> 

는 편집 :

내가 입력에서 값 날짜를 얻을 수 docs으로

<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy"></div> 
<input type="hidden" id="my_hidden_input" class="form-control"> 

<script type="text/javascript"> 
    jQuery('#datepicker').datepicker(); 
    jQuery('#datepicker').on('changeDate', function() { 
    jQuery('#my_hidden_input').val(jQuery('#datepicker').datepicker('getFormattedDate')); 
    }); 

    jQuery(document).ready(function() { 
    jQuery("#datepicker").datepicker({ 
     startDate: new Date(), 
     language: "fr", 
     autoOpen: true, 
     autoclose: true, 
     todayHighlight: true 
     //datesDisabled: ['22/02/2017', '28/02/2017'] 
    }).datepicker('update', new Date());; 
    }); 

    jQuery("input[type=hidden]").bind('change', function() { 
    alert(jQuery(this).val()); 
    }); 
</script> 

Answer 1

말 :

간단한 div에서 datepicker를 인스턴스화하면 항상 볼 수있는 임베디드 피커가 제공됩니다. 여기

작업 예제 :

jQuery(function() { 
 
    jQuery("#datepicker").datepicker({ 
 
    startDate: new Date(), 
 
    minDate: 0, 
 
    language: "fr", 
 
    autoOpen:true, 
 
    autoclose: true, 
 
    todayHighlight: true 
 
    }).datepicker('update', new Date()); 
 
    
 
    jQuery('#datepicker').on('changeDate', function(e) { 
 
    jQuery('#my_hidden_input').val(e.date); 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.fr.min.js"></script> 
 

 
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy"> 
 
</div> 
 
<input type="hidden" id="my_hidden_input" class="form-control">

편집 : 당신은 잘못된 위치에하여 changeDate 청취자를 추가

, datepicker 초기화 이후에 넣어. 또한 changeDate 이벤트에는 선택한 날짜를 나타내는 Date 개체가 포함 된 date 속성이 있습니다.