css - Bootstrap datepicker 下拉菜单作为输入的 100%

Question

我目前正在开展一个元素，我需要一个日历，该日历将 100% 是它所基于的 HTML 输入。我知道您可以使用以下命令根据像素调整日历的大小

 .datepicker {
   /*This has to be 100% of the width of the textinput*/
   width: "n"px;
 }

 .table-condensed {
   width: 100%;
 }

基于如下所示的 HTML

 <div class = "input-group date" id='datepicker'>
      <span class = "input-group-addon"><i class = "fa fa-calendar"></i></span>
      <input class = "form-control" type="text" name="date" id = "date" placeholder="DD/MM-ÅÅÅÅ"
      <?php 
      if(isset($_SESSION['searchDate'])){
        $displaySearch = $_SESSION['searchDate'];
        unset($_SESSION['$searchDate']);
      }
      ?>
      value = "<?php echo $displaySearch;?>">
    </div>

我在网上找遍了也没有找到答案。注意这里有jQuery来初始化datepicker

$(document).ready(function() {
  $("#datepicker").datepicker({
    format: "dd/mm-yyyy",
    autoclose: true,
    todayHighlight: true,
    clearBtn: true,
    orientation: "top",
    language: 'sv',
    weekStart: 1,
  });
});

我的假设是，以某种方式需要将输入包围在某个 div 中，然后我将输入作为 div 的 100%，但这对我不起作用。你们中有人以前遇到过这个问题并找到了合法的解决方案吗？

Answer 1

尝试以下代码段。我已经在代码中评论了。有关更多信息，请访问他们的文档

https://eonasdan.github.io/bootstrap-datetimepicker/

$(function() {
  $("#datePicker").datepicker({
    // Here you can add any additional parameters
    format: "yyyy/mm/dd"
  });
});

<!--Importing CDN's-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<!--DatePicker component-->
<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <input type='text' class="form-control" id='datePicker' placeholder="yyyy/mm/dd" />
    </div>
  </div>
</div>