jQuery日期选择器插件bootstrap-datepicker.js

bootstrap-datepicker.js介绍

bootstrap-datepicker是一款Bootstrap日期选择器插件。该日期选择器插件支持多种语言，可通过配置参数设置日期选择器，日期范围选择器等，功能非常强大。

bootstrap-datepicker.js安装

可以通过npm、bower或yarn来安装bootstrap-datepicker日期选择器插件。

• Yarn

yarn add bootstrap-datepicker

• NPM

npm install bootstrap-datepicker

• Bower

bower install bootstrap-datepicker

bootstrap-datepicker.js使用方法

• 在页面中引入bootstrap相关文件，jquery和bootstrap-datepicker3.css，以及bootstrap-datepicker.js文件。

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-datepicker3.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-datepicker.js"></script>      

• 如果需要使用配置文字等，还需要引入相应的js文件，例如简体中文需要引入bootstrap-datepicker.zh-CN.min.js文件。

<script type="text/javascript" src="dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>       

• HTML结构
  可以直接在<input>元素上添加data-provide="datepicker"属性直接将它转换为一个日期选择器。如果需要内联的日期选择器，可以使用data-provide="datepicker-inline"。例如：

<input data-provide="datepicker">

如果需要一个容器，可以使用下面的代码：

<div class="input-group date" data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>   

• 初始化插件
  在页面DOM元素加载完毕之后，可以通过datepicker()方法来初始化bootstrap-datepicker日期选择器插件。

$('.datepicker').datepicker();