BootStrap dateRangePicker時間范圍控件

BootStrap dateRangePicker時間范圍控件

1 安裝引用

1.1 下載zip

Github：https://github.com/dangrossman/bootstrap-daterangepicker/

1.2 引入頁面

引入樣式和 JavaScript

<linkhref="bootstrap.min.css" rel="stylesheet">
<linkhref="font-awesome.min.css" rel="stylesheet">
<linkrel="stylesheet" type="text/css" media="all"href="daterangepicker-bs3.css" />
<scripttype="text/javascript"src="jQuery.min.js"></script>
<scripttype="text/javascript" src=" bootstrap.min.js"></script>
<scripttype="text/javascript" src="moment.js"></script>
<scripttype="text/javascript"src="daterangepicker.js"></script>

CDN:

bootstrap.min.css:

http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

font-awesome.min.css

http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css

jquery.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js

bootstrap.min.js

2 使用及例子

2.1 使用

1.使用daterangepicker()為元素創建一個時間范圍控件

<scripttype="text/javascript">
    $(document).ready(function(){
            $('input[name="daterange"]').daterangepicker();
    });
</script>

2.daterangepicker()還可以有個操作對象參數和回調函數。當用戶選擇時間范圍后調用回調函數，參數是monent時間對象的開始時間、結束時間、預定義的范圍標簽選擇。

$('input[name="daterange"]').daterangepicker({
    format: 'YYYY-MM-DD',
    startDate: '2013-01-01',
    endDate: '2013-12-31'
},
function(start, end, label) {
    alert('A date range was chosen: ' +start.format('YYYY-MM-DD') + ' to ' +   end.format('YYYY-MM-DD'));
});

3.操作參數

`startDate`: (Date object, moment object or string) 起始時間

`endDate`: (Date object, moment object or string) 結束時間

`minDate`: (Date object, moment object or string) 可選最早時間

`maxDate`: (Date object, moment object or string) 可選最遲時間

`timePicker`: (boolean) 是否顯示time選擇

`timePickerIncrement`: (number) time選擇遞增數

`timePicker12Hour`: (boolean) 是否12小時制

`opens`: (string: 'left'/'right') 顯示在元素左邊還是右邊

`buttonClasses`: (array) 按鈕樣式

`applyClass`: (string) 應用按鈕樣式

`cancelClass`: (string) 取消按鈕樣式

`format`: (string) date/time格式

`separator`: (string) 分隔符

`locale`: (object) 本地設置

`singleDatePicker`: (boolean) 是否是單個時間選擇器

`parentEl`: (string) 將控件放到哪個元素內，默認body

4.函數方法

`setOptions(object,function)`: 設置操作

`setStartDate(Date/moment/string)`:設置起始時間

`setEndDate(Date/moment/string)`:設置結束時間

例子:

//create a new daterange picker
$('#daterange').daterangepicker({startDate: '2014-03-05', endDate: '2014-03-06' }); 
//change theselected date range of that picker
$('#daterange').data('daterangepicker').setStartDate('2014-03-01');
$('#daterange').data('daterangepicker').setEndDate('2014-03-31');

5.事件

`show.daterangepicker`:Triggered when the picker is shown

`hide.daterangepicker`:Triggered when the picker is hidden

`apply.daterangepicker`:Triggered when the apply button is clicked

`cancel.daterangepicker`:Triggered when the cancel button is clicked

例子：

$('#daterange').daterangepicker();

$('#daterange').on('cancel.daterangepicker',function(ev, picker) {
  //do something, like clearing an input
  $('#daterange').val('');
});


$('#daterange').on('apply.daterangepicker',function(ev, picker) {
 　　console.log(picker.startDate.format('YYYY-MM-DD'));
 　　console.log(picker.endDate.format('YYYY-MM-DD'));
});

2.2效果舉例

<h4>Basic DateRange Picker</h4>

<divclass="well">
   <formclass="form-horizontal">
          <fieldset>
          <div class="control-group">
                   <divclass="controls">
                    <div class="input-prependinput-group">
                      <span class="add-oninput-group-addon"><i class="glyphicon glyphicon-calendar fafa-calendar"></i></span><input type="text"style="width: 200px" name="reservation"id="reservation" class="form-control"value="03/18/2013 - 03/23/2013" />
                    </div>
                   </div>
          </div>
          </fieldset>
   </form>

 

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

   });
   </script>
</div>

 

<h4>BasicSingle Date Picker</h4>

<divclass="well">
   <formclass="form-horizontal">
          <fieldset>
          <div class="control-group">
                   <divclass="controls">
                    <div class="input-prependinput-group">
                      <span class="add-oninput-group-addon"><i class="glyphicon glyphicon-calendar fafa-calendar"></i></span><input type="text"style="width: 200px" name="birthday"id="birthday" class="form-control"value="03/18/2013" />
                    </div>
                   </div>
          </div>
          </fieldset>
   </form>

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

   });
   </script>
</div>

 

 

 

<h4>Date Range& Time Picker with 30 Minute Increments</h4>
<divclass="well">
   <formclass="form-horizontal">
          <fieldset>
          <div class="control-group">
                   <labelclass="control-label" for="reservationtime">Choose yourcheck-in and check-out times:</label>
                   <divclass="controls">
                    <div class="input-prependinput-group">
                      <span class="add-on input-group-addon"><iclass="glyphicon glyphicon-calendar fafa-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>

 

   <scripttype="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>