您的位置:首页 > 其它

dateRangePicker插件用法

2017-08-31 13:54 197 查看


Date Range Picker时间插件非常不错,主要体现在选择一个时间区间,俗称双日历控件

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="moment.js"></script> 
<script type="text/javascript" src="daterangepicker.js"></script> 
<link 
4000
rel="stylesheet" type="text/css" href="bootstrap.css" /> 
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" /> 
2与3必须引用,否则报moment is not fuction!!!!!!!

地址:http://www.daterangepicker.com/
demo地址:http://tamble.github.io/jquery-ui-daterangepicker/#event
api
参数
startDate: (日期对象、实践对象或者字符串)初始开始时间
endDate: (日期对象、实践对象或者字符串) 初始结束时间
minDate: (日期对象、实践对象或者字符串) 可选最早时间
maxDate: (日期对象、实践对象或者字符串) 可选最晚时间
dateLimit: (对象) 选择开始日期和结束日期之间的最大跨度
timeZone: (字符串或数字) 时区,默认为本地时区
showDropdowns: (布尔) 在年月份选择框上面显示可以跳刀特定月份的选择
showWeekNumbers: (布尔) 日历的每周前显示周数
timePicker: (布尔) 是否显示时间选择框
timePickerIncrement: (数字) 步长
timePicker12Hour: (布尔) 使用12小时制替代24小时,并添加AM/PM下拉框选项
timePickerSeconds: (布尔) 时间选择框是否显示秒数
ranges: (对象) 设定预定义日期范围
opens: (字符串: 'left'/'right'/'center')选择相对日期框的相对位置
buttonClasses: (数组) 自定义按钮样式
applyClass: (字符串) 自定义按钮样式(apply/应用)
cancelClass: (字符串) 自定义按钮样式(cancle/取消)
format: (字符串) Date/time 结果时间格式
separator: (字符串) 开始时间和结束时间的分割字符
locale: (对象) 本地化
singleDatePicker: (布尔) 只显示一个时间
parentEl: (string) 容器,缺省为body
》》》》》》初始化插件《《《《《《
$(
'#reportrange'
).daterangepicker(


<
e4d5
br />

[html] view
plain copy

 print?

<div class="x_panel1">  

                    

                      <div class="row x_title">  

                      <div class="col-md-6">  

                        <h3><small>历史总览</small></h3>  

                      </div>  

                      <div class="col-md-6">  

                        <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">  

                          <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>  

                          <span id="getTimes" >2011-11:11</span> <b class="caret"></b>  

                        </div>  

                      </div>  

                   </div>  

                 </div>  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: