从弹出式菜单制作引导日期选择器到内嵌

Question

我使用了this 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> 

编辑：

我不能从输入获得的价值日期

<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

由于docs说：

在一个简单的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属性。