Bootstrap 3 Datepicker 使用过程-优快云博客

本文介绍如何在使用Bootstrap布局的项目中集成Datepicker组件。详细列出了所需依赖资源及安装步骤，并提供了页面引用资源文件的具体代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在创建记录的时候，需要用到日历的功能。本身是使用的bootstrap布局的，所以就找到Datepicker，看了一下用起来还是挺方便的。下面就是使用过程。

依赖的资源

jQuery
Moment.js
Bootstrap.js
Bootstrap Datepicker script
Bootstrap CSS
Bootstrap Datepicker CSS

安装方式

由于我是Visual Studio开发工具，所以就使用bower安装这个资源。

bower install eonasdan-bootstrap-datetimepicker#latest --save

通过上面的命令，就将资源引入到工程里了。下面就可以在页面中使用了。

<head>
  <!-- ... -->
  <script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
  <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>