bootstrap_bootstrap中日歷范圍選擇插件daterangepicker的使用

1.引入腳本

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="assets/dist/css/bootstrap-datetimepicker.css" />
<script src="assets/js/jquery-2.1.0.js"></script>
<script src="assets/dist/js/bootstrap-datetimepicker.js"></script>
<script src="assets/dist/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

2.html代碼

<div class="controls input-append date form_datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                    <input size="16" type="text" value="" readonly>
                    <span class="add-on"><i class="icon-remove"></i></span>
                    <span class="add-on"><i class="icon-th"></i></span>
                </div>

3.腳本代碼

$('.form_datetime').datetimepicker({
                language: 'zh-CN',
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
                showMeridian: 1
            });

一些參數

<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'),
  //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'));
 });
 //設置日期菜單被選項 --開始--
 /*
 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>