daterangepicker - 双日期控件选择器

双日历时间段选择插件 — 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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值