Bootstrap 日期选择器选项不起作用

Question

我有一个表单字段，它是一个日期，我为此使用了日期选择器。这是表单字段：

<div class=form-group>
  <div class="input-group date" data-provide="datepicker">
    <input class="form-control" id="data" name="data" placeholder="VVVV/MM/DD" type="text" />
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>

这些是我提供的未应用的选项：

$('#data').datepicker({
  format: "yyyy/mm/dd",
  todayHighlight: true,
  autoclose: true,
  clearBtn: true
});

此 jQuery 代码位于外部 JavaScript 文件的 $(document).ready() 函数内，该文件包含在结束 </body> 标记之前。

Answer 1

在您的 JQuery 中，您定位的是 <input/> 元素的 ID。如果您定位输入的父元素，bootstrap 日期选择器将起作用。

试试运行这个代码片段或者看看这个 CodePen Demo:

$(document).ready(function() {
  $("#datepicker-group").datepicker({
    format: "yyyy/mm/dd",
    todayHighlight: true,
    autoclose: true,
    clearBtn: true
  });
});

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

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


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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>

Answer 2

克服你需要使用的情况，

   $(document).ready(function () {      });

您需要定位输入的父元素。这使得日期选择器工作正常。

JS 编码，

 <script>

        $(document).ready(function () {
            $('#selectDate').datepicker({
                dateFormat: 'dd/mm/yy', // set date format as you prefer
                changeMonth: true, // if you want to change months
                changeYear: true,  // if you want to change years
                yearRange: "-50:+10",
                clickInput: true,

                onSelect: function (date) {
                    $('#selectName').val(date).attr('readonly', true); // if you want to make event fire after the date selection
                }

            });
        });

    </script>

Bootstrap 日期选择器选项不起作用

Bootstrap datepicker options not working

jquery

twitter-bootstrap

bootstrap-datepicker