Date Range Picker時間插件很是不錯，主要體如今選擇一個時間區間

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

                });

 

轉自：http://www.cnblogs.com/shiyou00/p/5512678.html