地址: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' ));
                });