地址：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(
{ // startDate: moment().startOf('day'), //endDate: moment(), //minDate: '01/01/2012', //最小时间 maxDate : moment(), //最大时间 dateLimit : { days : 30 }, //起止时间的最大间隔 showDropdowns : true , showWeekNumbers : false , //是否显示第几周 timePicker : true , //是否显示小时和分钟 timePickerIncrement : 60, //时间的增量，单位为分钟 timePicker12Hour : false , //是否使用12小时制来显示时间 ranges : { //'最近1小时': [moment().subtract('hours',1), moment()], '今日' : [moment().startOf( 'day' ), moment()], '昨日' : [moment().subtract( 'days' , 1).startOf( 'day' ), moment().subtract( 'days' , 1).endOf( 'day' )], '最近7日' : [moment().subtract( 'days' , 6), moment()], '最近30日' : [moment().subtract( 'days' , 29), moment()] }, opens : 'right' , //日期选择框的弹出位置 buttonClasses : [ 'btn btn-default' ], applyClass : 'btn-small btn-primary blue' , cancelClass : 'btn-small' , format : 'YYYY-MM-DD HH:mm:ss' , //控件中from和to 显示的日期格式 separator : ' to ' , locale : { applyLabel : '确定' , cancelLabel : '取消' , fromLabel : '起始时间' , toLabel : '结束时间' , customRangeLabel : '自定义' , daysOfWeek : [ '日' , '一' , '二' , '三' , '四' , '五' , '六' ], monthNames : [ '一月' , '二月' , '三月' , '四月' , '五月' , '六月' , '七月' , '八月' , '九月' , '十月' , '十一月' , '十二月' ], firstDay : 1 } }, function (start, end, label) { //格式化日期显示框 $( '#reportrange span' ).html(start.format( 'YYYY-MM-DD HH:mm:ss' ) + ' - ' + end.format( 'YYYY-MM-DD HH:mm:ss' )); });
[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>
