BootStrap dateRangePicker时间范围控件分析

你猜 阅读:279 2021-04-25 16:58:53 评论:0

BootStrap dateRangePicker时间范围控件

1 安装引用

1.1 下载zip

Github:IT虾米网

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:

IT虾米网

font-awesome.min.css

IT虾米网

jquery.min.js

IT虾米网

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>     

  


声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号