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>
相关文章推荐
- 【bootstrap】使用支持bootstrap的时间插件daterangepicker
- bootstrap中日历范围选择插件daterangepicker的使用详解
- daterangepicker 日期范围插件自定义 可选 年份
- Angular的daterangepicker日历插件常用配置
- bootstrap-daterangepicker-master相关用法
- 时间段插件daterangepicker —— 基本使用及回显问题解决方法
- bootstrap日期插件daterangepicker的使用
- linux date 的用法
- Yii 2.0 时间日期插件之yii2-date-picker-widget
- linux date详细用法
- Linux date命令的用法
- vue使用laydate时间插件的方法
- JavaScript引用类型Date常见用法实例分析
- linux学习第六十三篇:Shell脚本介绍,Shell脚本结构和执行,date命令用法,Shell脚本中的变量
- jquery datePicker插件只选择月份终极解决方案
- jquery插件autocomplete用法示例
- 搜bigAutocomplete索下拉自动补全插件,Ajax+Thinkphp后台取数据的用法。
- Zend Framework教程之Zend_Controller_Plugin插件用法详解
- Jquery UI的datepicker插件使用方法
- bootstrap-datepicker插件使用