如何设置引导日期选择器

How to setup bootstrap-datepicker

本文关键字：日期 选择器 设置 何设置      更新时间：2023-09-26

我正在尝试使用bootstrap-datepicker。问题是我只得到没有样式的输入文件。以下是我的包括：

<link href="../css/bootstrap.css" rel="stylesheet" media="screen">
<link href="../css/datepicker.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">
<script src="../js/jquery.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
        <script src="../js/assets/html5shiv.js"></script>
        <script src="../js/assets/respond.min.js"></script>
<![endif]-->
<script src="../js/bootstrap.min.js"></script>
<script src="../js/assets/bootstrap-datepicker.js"></script>
<script src="../js/main.js"></script>

这是 HTML：

<div class="input-append date" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
    <input id="dp3" size="16" type="text" value="12-02-2012"/>
    <span class="add-on"><i class="icon-calendar" id="cal2"></i></span>
</div>

这是JavaScript：

$('#dp3').datepicker();

怎么了？？

注意：否，当我专注于输入时，日历出现，但没有图标。

如果您使用此版本，则必须将其与 Bootstrap 2 一起使用，因为它不完全支持 Bootstrap 3。如果您使用 Bootstrap 3，则必须自己处理图标问题，通过添加不同的图标、使用按钮代替或完全删除该部分。

从您的代码来看，您似乎缺少添加以下css文件。

  1. 引导 CSS
  2. 引导日期选择器 CSS

确保添加它。

在这里看到工作 JSFiddle

要解决此问题，请在加载 DOM 时进行此调用：

$(function() {
  $('#dp3').datepicker();
});

或

 $(document).ready(function(){
         $('#dp3').datepicker();
       });
相关文章：