Question

<div class="form-group">
     <label for="apointment-date"> Date</label>
     <div class="input-group date" id="datepicker">
         <input class="form-control" id="appintmentDate" type="date" required>
         <span class="input-group-addon">
             <span class="glyphicon glyphicon-calendar"></span>
         </span>
     </div>
</div>
<script language="javascript">
    $(document).ready(function () {
         $("#appintmentDate").datepicker({
             minDate: 0
         });
    });
</script>

我收到以下错误：

未捕获的TypeError：$（...）。datepicker不是函数

如果我点击日期输入字段，则应禁用之前的日期。它应该只显示从现在开始的几天。

Answer 1

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

$('#appintmentDate').datepicker({ 
    minDate: today
});

尝试一次..

Answer 2

您收到错误，因为从未定义datepicker方法。请注意，datepicker库中包含TypeError方法，但它不是Bootstrap默认组件的一部分。

您必须正确包含jQuery UI以避免$(document).ready(function () { $("#appintmentDate").datepicker({ minDate: 0 }); });问题，然后您必须将输入类型更改为文本。这是一个有效的例子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<div class="form-group">
    <label for="apointment-date"> Date</label>
    <div class="input-group date" id="datepicker">
      <input class="form-control" id="appintmentDate" type="text" required>
      <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
</div>

#footer
{
    background-color: #3A3A3A;
    border-top: 1px solid #222222;
    font-size: 11px;
    overflow: auto;
}

#footer #footer-content
{
    padding: 10px 15px;
    display: inline-block;
    float: left;
}

如何在使用Bootstrap

2 个答案: