DateRangePicker使用演示

Date Range Picker for Bootstrap是一个非常不错的bootstrap日期插件，对于使用方法和本地化语言处理做演示，请直接查阅代码：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Date Range Picker for Bootstrap</title>

  

  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

  

  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">

  

  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.min.css">

</head>

<body>

    <label class="box-title">时间范围：</label>

    <div class="input-group">

        <div class="input-group-addon">

            <i class="fa fa-calendar"></i>

        </div>

        <input type="text" class="form-control pull-right" id="reservation">

    </div>





<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>



<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<script src="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/moment.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.min.js"></script>

<script>

$(function() {

    //console.log('xxoo:'+moment().subtract(1, 'days').format('YYYY-MM-DD'));

    //Date range picker

    $('#reservation').daterangepicker({

        applyClass : 'btn-sm btn-success',

        cancelClass : 'btn-sm btn-default',

        startDate: moment().subtract(1, 'days'),

        endDate  : moment(),

        opens: 'right',    // 日期选择框的弹出位置

        showWeekNumbers: true,     // 是否显示第几周

        //timePicker: true,

        //timePickerIncrement : 10, // 时间的增量，单位为分钟

        //timePicker12Hour : false, // 是否使用12小时制来显示时间

        //maxDate : moment(),           // 最大时间

        ranges : {

            //'最近1小时': [moment().subtract('hours',1), moment()],

            '今天': [moment().startOf('day'), moment()],

            '昨天': [moment().subtract(1,'days').startOf('day'), moment().subtract(1,'days').endOf('day')],

            '最近7天': [moment().subtract(6,'days'), moment()],

            '最近30天': [moment().subtract(29,'days'), moment()],

            '本月': [moment().startOf("month"),moment().endOf("month")],

            '上个月': [moment().subtract(1,"month").startOf("month"),

moment().subtract(1,"month").endOf("month")]

        },

        locale: {

            "format": "YYYY-MM-DD",

            "separator": " 至 ",

            "applyLabel": "确定",

            "cancelLabel": "取消",

            "fromLabel": "起始时间",

            "toLabel": "截止时间",

            "customRangeLabel": "自定义",

            "weekLabel": "周",

            "daysOfWeek": ["日","一","二","三","四","五","六"],

            "monthNames": ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

            "firstDay": 1

        }

    }, function(start, end, label) {

        console.log('选择了：' + start.format('YYYY-MM-DD') + ' 到 ' + end.format('YYYY-MM-DD') + ' (标签: ' + label + ")");

    });

})

</script>

</body>

</html>

效果如图：