jQuery日期范围选择插件bootstrap-daterangepicker

使用方法：

引入必要文件

<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

插件初始化、参数配置

$('#demo').daterangepicker({
    "linkedCalendars": false,
    "autoUpdateInput": false,
    "showCustomRangeLabel": false,
    "startDate": "11/09/2016",
    "endDate": "11/15/2016"
}, function(start, end, label) {
  console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});

HTML结构

<div class="col-md-4 col-md-offset-2 demo">
      <h4>Your Date Range Picker</h4>
      <input type="text" id="config-demo" class="form-control" id="demo">
      <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
</div>