（双日历）bootstrap-daterangepicker

js引入：
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
      <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
      <link rel="stylesheet" type="text/css" media="all" href="{$smarty.const.TCALENDOR_PATH}daterangepicker-bs3.css" />
      <script type="text/javascript" src="{$smarty.const.TCALENDOR_PATH}jquery-1.8.3.min.js"></script>
      <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="{$smarty.const.TCALENDOR_PATH}moment.js"></script>
      <script type="text/javascript" src="{$smarty.const.TCALENDOR_PATH}daterangepicker.js"></script>

html代码：
<div class="well">

    <form class="form-horizontal">
       <fieldset>
          <div class="control-group">
            <div class="controls">
             <div class="input-prepend input-group">
            <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
         </span><input type="text" readonly="readonly" style="width: 200px" name="reservation" id="reservation" class="form-control" value="2014-5-21 - 2014-6-21" />
        </div>
       </div>
     </div>
    </fieldset>
 </form>

 <script type="text/javascript">
     $(document).ready(function() {
       $('#reservation').daterangepicker(null, function(start, end, label) {
           console.log(start.toISOString(), end.toISOString(), label);
       });
   });
 </script>
 </div>


效果图：

 

 

2、生日：
<div class="well">

               <form class="form-horizontal">
                 <fieldset>
                  <div class="control-group">
                    <div class="controls">
                     <div class="input-prepend input-group">
                       <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input type="text" readonly="readonly" style="width: 200px" name="birthday" id="birthday" class="form-control" value="03/18/2013" />
                     </div>
                    </div>
                  </div>
                 </fieldset>
               </form>

               <script type="text/javascript">
               $(document).ready(function() {
                  $('#birthday').daterangepicker({ singleDatePicker: true }, function(start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
                  });
               });
               </script>

            </div>

效果图：

3、
<div class="well">

               <form class="form-horizontal">
                 <fieldset>
                  <div class="control-group">
                    <label class="control-label" for="reservationtime">Choose your check-in and check-out times:</label>
                    <div class="controls">
                     <div class="input-prepend input-group">
                       <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
                       <input type="text" style="width: 400px" name="reservation" id="reservationtime" class="form-control" value="08/01/2013 1:00 PM - 08/01/2013 1:30 PM"  class="span4"/>
                     </div>
                    </div>
                  </div>
                 </fieldset>
               </form>

               <script type="text/javascript">
               $(document).ready(function() {
                  $('#reservationtime').daterangepicker({
                    timePicker: true,
                    timePickerIncrement: 30,
                    format: 'MM/DD/YYYY h:mm A'
                  }, function(start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
                  });
               });
               </script>

            </div>  
效果图：

4、
<div class="well">

               <div class="dropdown" style="display: inline-block;">
                 <a data-toggle="dropdown" class="btn btn-primary" href="#">Regular dropdown</a>
                 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                   <li><a href="#">item</a></li>
                 </ul>
               </div>

               <div id="reportrange2" class="btn" style="display: inline-block; background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                  <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                  <span></span> <b class="caret"></b>
               </div>

               <script type="text/javascript">
               $(document).ready(function() {
                  $('#reportrange2 span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
                  $('#reportrange2').daterangepicker();
               });
               </script>

            </div>

效果如图：