daterangepicker - 双日期控件选择器

最新推荐文章于 2020-08-11 16:05:10 发布

wyn314

最新推荐文章于 2020-08-11 16:05:10 发布

阅读量2.5k

点赞数

分类专栏： angular 常用插件文章标签： bootstrap 控件日历插件框架

本文链接：https://blog.csdn.net/csdnwyn314/article/details/77337772

版权

angular 常用插件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件，用户自己选择起始时间和终止时间，简化了两个单日期控件之间交互传值的问题。

代码运行结果查看： https://githubwyn.github.io/Node/test/daterangepicker/index.html

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="inject/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="all" href="inject/css/daterangepicker-bs3.css" />
    <link rel="stylesheet" href="inject/css/font-awesome.min.css">

    <script type="text/javascript" src="inject/jquery.min.js"></script>
    <script type="text/javascript" src="inject/bootstrap.min.js"></script>
    <script type="text/javascript" src="inject/moment.js"></script>
    <script type="text/javascript" src="inject/daterangepicker.js"></script>
</head>
<body>
<div class="page-content">
    <!-- BEGIN PAGE CONTAINER-->
    <div class="container-fluid">
        <div class="row-fluid" style="margin-top:5px">
            <div class="span4">
                <div class="control-group">
                    <label class="control-label">
                        日期：
                    </label>
                    <div class="controls" style="display: inline-block;">
                        <div id="reportrange" class="pull-left dateRange" style="width:350px; border: 1px solid #ddd;">
                            <span id="searchDateRange"></span>
                            <b class="caret"></b>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<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'));
                });
    })
</script>
</body>
</html>