datetimerangepicker配置及默認時間段展示

<script type="text/javascript">
 $(document).ready(function (){
 //時間插件
 $('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));
 $('#reportrange').daterangepicker(
 {
  startDate: moment().startOf('day'),  //這里配置的起止時間將會決定在ranges中默認選中哪個時間段
  endDate: moment(),  //這里配置的起止時間將會決定在ranges中默認選中哪個時間段,如果不配置起止時間,則默認展示為今天
  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'));
 });
 //設置日期菜單被選項 --開始--
 /*
 var dateOption ;
 if("${riqi}"=='day') {
 dateOption = "今日";
 }else if("${riqi}"=='yday') {
 dateOption = "昨日";
 }else if("${riqi}"=='week'){
 dateOption ="最近7日";
 }else if("${riqi}"=='month'){
 dateOption ="最近30日";
 }else if("${riqi}"=='year'){
 dateOption ="最近一年";
 }else{
 dateOption = "自定義";
 }
 $(".daterangepicker").find("li").each(function (){
 if($(this).hasClass("active")){
 $(this).removeClass("active");
 }
 if(dateOption==$(this).html()){
 $(this).addClass("active");
 }
 });*/
 //設置日期菜單被選項 --結束--
 })
</script>

bootstrap的datetimerangepicker配置,參考自:http://www.jb51.net/article/92780.htm