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/

＆＃13;

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

＆＃13;

<!--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>

＆＃13;

Bootstrap datepicker下拉列表为输入的{100}

1 个答案: